Advanced

Tutor model

i62 💰:9.4

i52 💰:7.9

🏆 i67 💰:62.5

i70 💰:125.0

i68 💰:125.0

🏆 i66 💰:75.0

i65 💰:125.0

i63 💰:62.5

i61 💰:75.0

i60 💰:9.4

i60 💰:37.5

i58 💰:62.5

i57 💰:22.5

i57 💰:37.5

i56 💰:45.0

⚡ i55 💰:11.25

i55 💰:37.5

i54 💰:62.5

i52 💰:35.0

i51 💰:37.5

i49 💰:15.0

i49 💰:62.5

i48 💰:11.3

i47 💰:7.5

i44 💰:25.0

i43 💰:37.5

i42 💰:187.5

i40 💰:5.0

i39 💰:100.0

i38 💰:37.5

i37 💰:11.0

i36 💰:187.5

i34 💰:12.5

i33 💰:37.5

i30 💰:1.0

i29 💰:1.5

i28 💰:150.0

i23 💰:20.0

i20 💰:4.0

i18 💰:1.0

i16 💰:25.0

i13 💰:1.5

Keep session private

What would you like to learn?

Override for the tutor's lesson content generation calls. Auto uses the system default (Claude Sonnet 5 for lesson text, Opus 5 for diagrams).

Lesson generation model

System default

i58 💰:18.8

i31 💰:11.0

i25 💰:31.3

Tutoring abilities

Put your hand right in front of your mouth and say the word **sun**.

You feel a gentle hiss of air before anything else — that opening sound is **/s/**.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }

    body {
      background: #f8f9fa;
      color: #1e2945;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
    }

    .word-nav {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 440px;
      justify-content: center;
    }

    .nav-btn {
      flex: 1;
      background: #ffffff;
      border: 2px solid #e6e6e6;
      border-radius: 12px;
      padding: 8px 4px;
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
    }

    .nav-btn .emoji {
      font-size: 20px;
    }

    .nav-btn.active {
      border-color: #fbbf24;
      background: #fffdf5;
      box-shadow: 0 4px 12px rgba(251, 191, 36, 0.25);
    }

    .stage {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      max-width: 440px;
      padding: 12px 0;
      gap: 16px;
    }

    .main-icon {
      font-size: 54px;
      line-height: 1;
      filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.08));
      transition: transform 0.3s ease;
    }

    /* Sound sequence row */
    .sound-track {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
    }

    .sound-box {
      background: #ffffff;
      border-radius: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      transition: all 0.3s ease;
    }

    .first-sound {
      flex: 1.1;
      max-width: 150px;
      height: 100px;
      border: 3px solid #fbbf24;
      background: #fffbeb;
      box-shadow: 0 6px 16px rgba(251, 191, 36, 0.3);
    }

    .rest-sound {
      flex: 1;
      max-width: 140px;
      height: 100px;
      border: 2px dashed #d1d5db;
      background: #ffffff;
      opacity: 0.7;
    }

    .sound-tag {
      position: absolute;
      top: -10px;
      background: #fbbf24;
      color: #78350f;
      font-size: 11px;
      font-weight: 800;
      padding: 2px 8px;
      border-radius: 999px;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }

    .phoneme-text {
      font-size: 32px;
      font-weight: 800;
      color: #b45309;
    }

    .rest-text {
      font-size: 26px;
      font-weight: 600;
      color: #9ca3af;
    }

    .wave-bar {
      display: flex;
      align-items: center;
      gap: 4px;
      margin-top: 4px;
    }

    .wave-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #f59e0b;
      animation: pulse 1.2s infinite ease-in-out;
    }

    .wave-dot:nth-child(2) { animation-delay: 0.2s; }
    .wave-dot:nth-child(3) { animation-delay: 0.4s; }

    @keyframes pulse {
      0%, 100% { transform: scale(0.8); opacity: 0.4; }
      50% { transform: scale(1.4); opacity: 1; }
    }

    .flow-indicator {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 700;
      color: #6b7280;
    }

    .arrow-icon {
      color: #f59e0b;
      font-size: 15px;
    }

    /* Action bar */
    .listen-btn {
      background: #1e2945;
      color: #ffffff;
      border: none;
      border-radius: 999px;
      padding: 10px 24px;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      box-shadow: 0 4px 10px rgba(30, 41, 69, 0.15);
      transition: background 0.2s, opacity 0.2s;
    }

    .listen-btn:active {
      background: #0f172a;
    }
  </style>
</head>
<body>

  
  <div class="word-nav">
    <button class="nav-btn active" onclick="setWord(0)">
      <span class="emoji">☀️</span>
      <span>Sun</span>
    </button>
    <button class="nav-btn" onclick="setWord(1)">
      <span class="emoji">🐟</span>
      <span>Fish</span>
    </button>
    <button class="nav-btn" onclick="setWord(2)">
      <span class="emoji">🐱</span>
      <span>Cat</span>
    </button>
    <button class="nav-btn" onclick="setWord(3)">
      <span class="emoji">🌙</span>
      <span>Moon</span>
    </button>
  </div>

  
  <div class="stage">
    <div id="mainEmoji" class="main-icon">☀️</div>

    <div class="sound-track">
      
      <div class="sound-box first-sound">
        <span class="sound-tag">1st Sound</span>
        <div id="firstPhoneme" class="phoneme-text">/s/</div>
        <div class="wave-bar">
          <div class="wave-dot"></div>
          <div class="wave-dot"></div>
          <div class="wave-dot"></div>
        </div>
      </div>

      
      <span style="font-size: 22px; color: #d1d5db; font-weight: bold;">+</span>

      
      <div class="sound-box rest-sound">
        <div id="restPhoneme" class="rest-text">un</div>
      </div>
    </div>

    
    <div class="flow-indicator">
      <span>Sound Order</span>
      <span class="arrow-icon">→</span>
      <span>Left to Right</span>
    </div>
  </div>

  
  <button class="listen-btn" onclick="playSound()">
    <span>🔊</span>
    <span id="btnLabel">Hear 1st Sound</span>
  </button>

  <script>
    const words = [
      { name: 'Sun', emoji: '☀️', first: '/s/', rest: 'un', sound: 's', full: 'sun' },
      { name: 'Fish', emoji: '🐟', first: '/f/', rest: 'ish', sound: 'f', full: 'fish' },
      { name: 'Cat', emoji: '🐱', first: '/k/', rest: 'at', sound: 'k', full: 'cat' },
      { name: 'Moon', emoji: '🌙', first: '/m/', rest: 'oon', sound: 'm', full: 'moon' }
    ];

    let currentIndex = 0;

    function setWord(index) {
      currentIndex = index;
      const data = words[index];

      // Update Active Navigation Button
      const buttons = document.querySelectorAll('.nav-btn');
      buttons.forEach((btn, i) => {
        btn.classList.toggle('active', i === index);
      });

      // Update Visuals
      document.getElementById('mainEmoji').textContent = data.emoji;
      document.getElementById('firstPhoneme').textContent = data.first;
      document.getElementById('restPhoneme').textContent = data.rest;
    }

    function playSound() {
      if ('speechSynthesis' in window) {
        window.speechSynthesis.cancel();
        const data = words[currentIndex];
        
        // Speak initial phoneme sound clearly
        const utter = new SpeechSynthesisUtterance(data.sound);
        utter.rate = 0.8;
        utter.pitch = 1.0;
        window.speechSynthesis.speak(utter);
      }
    }
  </script>
</body>
</html>

Words are built from small pieces of sound called **phonemes** — but how do we catch just the very first one?

To hear the start of a word, stretch it out slowly like sticky bubblegum.

When you say **cat** in slow motion, your mouth makes **/k/** before any other sound arrives.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <title>Hearing the First Sound</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 16px;
      user-select: none;
    }

    .container {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }

    /* Word Tabs */
    .word-tabs {
      display: flex;
      gap: 8px;
      width: 100%;
      justify-content: center;
    }

    .tab-btn {
      flex: 1;
      max-width: 110px;
      padding: 8px 12px;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      border-radius: 10px;
      font-size: 15px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      transition: all 0.2s ease;
    }

    .tab-btn.active {
      background: #06b6d4;
      color: #ffffff;
      border-color: #06b6d4;
      box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
    }

    /* Main Stage */
    .stage {
      width: 100%;
      background: #ffffff;
      border-radius: 16px;
      padding: 24px 16px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
      border: 1px solid #f1f5f9;
    }

    .word-hero {
      font-size: 44px;
      line-height: 1;
    }

    /* Sound Timeline Boxes */
    .sound-boxes {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
    }

    .sound-card {
      flex: 1;
      max-width: 100px;
      aspect-ratio: 1 / 1.1;
      background: #f8fafc;
      border-radius: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      border: 2px solid #e2e8f0;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .sound-card.first-sound {
      border-color: #06b6d4;
      background: #f0fdfa;
    }

    .badge-first {
      position: absolute;
      top: -10px;
      background: #06b6d4;
      color: #ffffff;
      font-size: 11px;
      font-weight: 800;
      padding: 2px 8px;
      border-radius: 12px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      box-shadow: 0 2px 4px rgba(6, 182, 212, 0.25);
    }

    .phoneme {
      font-size: 28px;
      font-weight: 800;
      color: #334155;
    }

    .sound-card.first-sound .phoneme {
      color: #0891b2;
    }

    .sound-order {
      font-size: 11px;
      color: #94a3b8;
      font-weight: 600;
      margin-top: 4px;
    }

    /* Active Highlight during slow-motion playback */
    .sound-card.active-sound {
      box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.35);
      background: #ecfeff;
      border-color: #06b6d4;
    }

    .sound-card.active-sound .phoneme {
      color: #0891b2;
    }

    /* Playback Control */
    .controls {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .play-btn {
      background: #1e2945;
      color: #ffffff;
      border: none;
      border-radius: 24px;
      padding: 10px 22px;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      box-shadow: 0 2px 8px rgba(30, 41, 69, 0.2);
      transition: opacity 0.2s ease;
    }

    .play-btn:active {
      opacity: 0.85;
    }

    .indicator-arrow {
      color: #cbd5e1;
      font-size: 16px;
      font-weight: bold;
    }
  </style>
</head>
<body>

  <div class="container">
    
    <div class="word-tabs">
      <button class="tab-btn active" onclick="selectWord(0)">🐱 cat</button>
      <button class="tab-btn" onclick="selectWord(1)">🌙 moon</button>
      <button class="tab-btn" onclick="selectWord(2)">☀️ sun</button>
    </div>

    
    <div class="stage">
      <div class="word-hero" id="wordEmoji">🐱</div>

      <div class="sound-boxes">
        
        <div class="sound-card first-sound" id="card0">
          <span class="badge-first">1st</span>
          <div class="phoneme" id="ph0">/k/</div>
          <div class="sound-order">1st Sound</div>
        </div>

        <div class="indicator-arrow">→</div>

        
        <div class="sound-card" id="card1">
          <div class="phoneme" id="ph1">/æ/</div>
          <div class="sound-order">2nd</div>
        </div>

        <div class="indicator-arrow">→</div>

        
        <div class="sound-card" id="card2">
          <div class="phoneme" id="ph2">/t/</div>
          <div class="sound-order">3rd</div>
        </div>
      </div>

      
      <div class="controls">
        <button class="play-btn" id="playBtn" onclick="playSlowMotion()">
          <span id="playIcon">▶</span> Slow Motion
        </button>
      </div>
    </div>
  </div>

  <script>
    const words = [
      { emoji: "🐱", phonemes: ["/k/", "/æ/", "/t/"], speech: "k... a... t... cat" },
      { emoji: "🌙", phonemes: ["/m/", "/uː/", "/n/"], speech: "m... oo... n... moon" },
      { emoji: "☀️", phonemes: ["/s/", "/ʌ/", "/n/"], speech: "s... u... n... sun" }
    ];

    let currentIdx = 0;
    let isPlaying = false;
    let playTimeout = null;

    function selectWord(idx) {
      if (isPlaying) stopAnimation();
      currentIdx = idx;

      // Update tabs
      const tabs = document.querySelectorAll('.tab-btn');
      tabs.forEach((tab, i) => {
        tab.classList.toggle('active', i === idx);
      });

      // Update contents
      const data = words[idx];
      document.getElementById('wordEmoji').textContent = data.emoji;
      document.getElementById('ph0').textContent = data.phonemes[0];
      document.getElementById('ph1').textContent = data.phonemes[1];
      document.getElementById('ph2').textContent = data.phonemes[2];
      
      resetHighlights();
    }

    function resetHighlights() {
      for (let i = 0; i < 3; i++) {
        document.getElementById('card' + i).classList.remove('active-sound');
      }
    }

    function playSlowMotion() {
      if (isPlaying) {
        stopAnimation();
        return;
      }

      isPlaying = true;
      document.getElementById('playIcon').textContent = '⏸';

      // Optional Speech synthesis for audio reinforcement
      if ('speechSynthesis' in window) {
        window.speechSynthesis.cancel();
        const utter = new SpeechSynthesisUtterance(words[currentIdx].speech);
        utter.rate = 0.75;
        window.speechSynthesis.speak(utter);
      }

      let step = 0;
      function highlightStep() {
        resetHighlights();
        if (step < 3) {
          document.getElementById('card' + step).classList.add('active-sound');
          step++;
          playTimeout = setTimeout(highlightStep, 700);
        } else {
          playTimeout = setTimeout(() => {
            resetHighlights();
            isPlaying = false;
            document.getElementById('playIcon').textContent = '▶';
          }, 600);
        }
      }

      highlightStep();
    }

    function stopAnimation() {
      clearTimeout(playTimeout);
      resetHighlights();
      isPlaying = false;
      document.getElementById('playIcon').textContent = '▶';
      if ('speechSynthesis' in window) {
        window.speechSynthesis.cancel();
      }
    }
  </script>
</body>
</html>

Be sure to make the actual **sound**, not the letter name — say **/m/** for *moon*, instead of the letter name *em*.

Can two totally different words begin with the exact same sound?

Say **dog** and **duck** out loud — both words pop open with that bouncy **/d/** sound.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
    }

    body {
      background: #f8f9fa;
      color: #1e2945;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

    .main-wrap {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      align-items: center;
    }

    /* Word selector tabs */
    .word-tabs {
      display: flex;
      gap: 8px;
      width: 100%;
      justify-content: center;
      flex-wrap: wrap;
    }

    .tab-btn {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 12px;
      padding: 8px 14px;
      font-size: 15px;
      font-weight: 600;
      color: #6b7280;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

    .tab-btn.active {
      background: #22c55e;
      color: #ffffff;
      border-color: #22c55e;
      box-shadow: 0 4px 12px rgba(34, 197, 94, 0.25);
    }

    /* Focus Area */
    .stage {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 16px;
      width: 100%;
      padding: 24px 16px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.04);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
    }

    .emoji-hero {
      font-size: 56px;
      line-height: 1;
      filter: drop-shadow(0 4px 8px rgba(0,0,0,0.08));
    }

    .sound-breakdown {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
    }

    .tile-first {
      position: relative;
      background: #ecfdf5;
      border: 2px solid #22c55e;
      border-radius: 14px;
      width: 80px;
      height: 86px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      box-shadow: 0 6px 16px rgba(34, 197, 94, 0.18);
      animation: popIn 0.35s ease;
    }

    .tile-first .letter {
      font-size: 40px;
      font-weight: 800;
      color: #15803d;
      line-height: 1;
    }

    .sound-tag {
      position: absolute;
      top: -12px;
      background: #22c55e;
      color: #ffffff;
      font-size: 13px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 20px;
      letter-spacing: 0.5px;
    }

    .tile-rest {
      background: #f8f9fa;
      border: 2px solid #e5e7eb;
      border-radius: 14px;
      height: 86px;
      padding: 0 20px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .tile-rest .letter {
      font-size: 40px;
      font-weight: 700;
      color: #9ca3af;
      line-height: 1;
    }

    .indicator {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 600;
      color: #15803d;
      background: #ecfdf5;
      padding: 6px 14px;
      border-radius: 20px;
    }

    .btn-sound {
      background: #ffffff;
      border: 1px solid #d1d5db;
      border-radius: 12px;
      padding: 8px 16px;
      font-size: 14px;
      font-weight: 600;
      color: #374151;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
      transition: background 0.15s ease, box-shadow 0.15s ease;
    }

    .btn-sound:active {
      background: #f3f4f6;
    }

    @keyframes popIn {
      0% { transform: scale(0.92); opacity: 0.8; }
      100% { transform: scale(1); opacity: 1; }
    }
  </style>
</head>
<body>

  <div class="main-wrap">
    
    <div class="word-tabs">
      <button class="tab-btn active" onclick="setWord(0)">🐶 dog</button>
      <button class="tab-btn" onclick="setWord(1)">🦆 duck</button>
      <button class="tab-btn" onclick="setWord(2)">☀️ sun</button>
      <button class="tab-btn" onclick="setWord(3)">🐱 cat</button>
    </div>

    
    <div class="stage">
      <div id="emoji" class="emoji-hero">🐶</div>

      <div class="sound-breakdown">
        <div class="tile-first" id="firstTile">
          <span class="sound-tag" id="soundTag">/d/</span>
          <span class="letter" id="firstLetter">d</span>
        </div>
        <div class="tile-rest">
          <span class="letter" id="restLetters">og</span>
        </div>
      </div>

      <div class="indicator">
        <span>✦</span> 1st Sound Focus
      </div>

      <button class="btn-sound" onclick="playSound()">
        <span>🔊</span> Hear 1st Sound
      </button>
    </div>
  </div>

  <script>
    const WORDS = [
      { emoji: '🐶', first: 'd', sound: '/d/', rest: 'og', word: 'dog' },
      { emoji: '🦆', first: 'd', sound: '/d/', rest: 'uck', word: 'duck' },
      { emoji: '☀️', first: 's', sound: '/s/', rest: 'un', word: 'sun' },
      { emoji: '🐱', first: 'c', sound: '/k/', rest: 'at', word: 'cat' }
    ];

    let currentIndex = 0;

    function setWord(index) {
      currentIndex = index;
      const data = WORDS[index];

      // Update UI elements
      document.getElementById('emoji').textContent = data.emoji;
      document.getElementById('soundTag').textContent = data.sound;
      document.getElementById('firstLetter').textContent = data.first;
      document.getElementById('restLetters').textContent = data.rest;

      // Retrigger pop animation
      const tile = document.getElementById('firstTile');
      tile.style.animation = 'none';
      tile.offsetHeight; // reflow
      tile.style.animation = 'popIn 0.35s ease';

      // Update active tab
      const buttons = document.querySelectorAll('.tab-btn');
      buttons.forEach((btn, i) => {
        btn.classList.toggle('active', i === index);
      });
    }

    function playSound() {
      if ('speechSynthesis' in window) {
        window.speechSynthesis.cancel();
        const data = WORDS[currentIndex];
        // Speak initial sound isolated, then full word
        const utterSound = new SpeechSynthesisUtterance(data.first);
        utterSound.rate = 0.8;
        utterSound.pitch = 1.1;

        const utterWord = new SpeechSynthesisUtterance(data.word);
        utterWord.rate = 0.9;

        window.speechSynthesis.speak(utterSound);
        setTimeout(() => {
          window.speechSynthesis.speak(utterWord);
        }, 550);
      }
    }
  </script>
</body>
</html>

Whenever you look at an object in your room, freeze on its very first sound and say it out loud.

Hearing the First Sound in Words. Identify the first sound (phoneme) you hear in a spoken word.

Identify the First Sound in a Word

Explicit Teaching of Phonological and Phonemic Awareness: Initial Sound Isolation

Phonics and Phoneme Awareness: Segmenting and Initial Sounds

Instruction should follow an explicit 'I do, We do, You do' (Gradual Release of Responsibility) framework. Begin with high-contrast continuous consonants (/m/, /s/, /f/, /l/) before moving to unvoiced stop sounds (/p/, /t/, /k/) and voiced stop sounds (/b/, /d/, /g/). Ensure all phonemic isolation activities are performed aloud with strict avoidance of the schwa (/ə/). Integrate multisensory kinesthetic strategies such as shoulder-tapping, pop-its, and Elkonin boxes to anchor abstract auditory phonemes into concrete physical actions.

Hearing the First Sound in Words

Stretching the Word

Finding Sound Twins