Guitar Modes, Chords, and Pentatonic Scales Trainer

See https://training.statecollegeguitarlessons.site for the interactive app!

Interactive Guitar Fretboard + Piano Trainer

  1. 1. Can you hear the sound?

    Sound is definitely not necessary to use the trainer. It's just a subtle enhancement because web browsers can do that now.

    Can you hear the sound?

  2. 2. Click on Interactive Guitar Fretboard + Piano Trainer…

    Click on Interactive Guitar Fretboard + Piano Trainer…

  3. 3. Clicking Play will light-up the tones which correspond to the selected mode

    Clicking Play will demo play the currently selected mode. The idea is to see what it looks like to play the mode on the neck in real life, from lowest tone to highest.

    Clicking Play will light-up the tones which correspond to the selected mode

  4. 4. Select Show scale from Display

    Select Show scale from Display

  5. 5. Display: Show scale

    This is the easiest view. All available tones of the selected "Tonic" are visible. For training, the Degree selected is a slightly lighter color. Changing degree changes the area with the lighter color as a visual hint to where you begin that mode. It is not an exact placement but a hint.

    Display: Show scale

  6. 6. Type of Study

    Select Chord, Mode, or Pentatonic for type of fretboard to show.

    Type of Study

  7. 7. Difficulty level: Display

    Select your desired fretboard display. Reveal on click is the most difficult.

    Difficulty level: Display

  8. 8. Display: Reveal on Click is shown

    Display: Reveal on Click is shown

  9. 9. Select Tonic to set desired Key

    Select Tonic to set desired Key

  10. 10. Select Degree / [Mode Name]

    This is probably the most imporant selector for traning. Once tonic is chosen, selecting the Degree determines what position the hand will be in for that particular mode. The position is hinted with a slightly different color of the dots.

    Select Degree / [Mode Name]

  11. 11. Select Mode from Type

    Selector for Mode, Chord, Pentatonic. Selecting Chord may seem confusing at first. If it does, go back to Mode view, and remember the fret where that mode's degree appears. That fret is the same fret where the chord is shown, if you select Chord view here. Selecting Pentatonic should be self explanatory, based on knowing what chord does.

    Select Mode from Type

  12. 12. Select Chord from Type

    Note that the text above the fretboard reads "Major" or "Minor"

    Select Chord from Type

  13. 13. Showing full fretboard display, key of C. Highlighted is Mixilydian mode at fret 3. It's highlighted there because that was the Ionian position in key of G, and the user hasn't selected a new Degree yet, so the old position remains highlighted as a hint.

    Showing full fretboard display, key of C. Highlighted is Mixilydian mode at fret 3. It's highlighted there because that was the Ionian position in key of G, and the user hasn't selected a new Degree yet, so the old position remains highlighted as a h

  14. 14. Change the position on the fretboard

    Select the desired mode for study. Changing this setting also changes the position of the highlighted area of the fretboard. The idea is that the hightlight is a visual hint, not an exact placement of the fingers. That's what the actual dots and Type selection are for.

    Change the position on the fretboard