When you first open the site, the guitar fretboard is representated as a series of colored note positions, one for each string and fret, with the low E string on the bottom in standard tuning. These note positions are numbered according to their chromatic scale positions relative to a "root" note, which is denoted by a "1". If you play the positions 1 through 7, skipping over the flatted notes, you'll hear the familiar major scale (Do, Re, Me...), also called the Ionian mode.
In music theory, the relationships between the root note and all of the others are represented by so-called "intervals," where the ♭2 (flatted second) is called a "minor second" interval, 2 is a "major second" interval, etc. (What are known as minor, major, perfect and diminished intervals cover the entire scale.)
Click an interval or mode, or select a scale or chord, to illustrate its relevant notes on the virtual guitar fretboard. The guitar fretboard's note positions are relative positions, so all intervals, scales, etc., can be transposed to any key by locating the key's root and mentally overlaying a "1" from the fretboard. Refresh the page or hover over the logo to reset the fretboard. Click the logo to highlight root frets only.
This site is primarily intended to assist the guitarist in developing the all-important ability to visualize over the entire fretboard. As beginners, we often learn scales or chords in one or two positions, but each can be executed from a number of other positions. Chords, for example, might use only bass notes, or only treble notes, or only the middle or "inside" strings. Chord intervals can be inverted, so that a Major triad (1, 3, 5) could be played upside down (5, 3, 1),
for example, which would sound just like the same key's IV position 6sus4 chord using a (1, 4, 6) voicing. Chords voicings can also be modified, for example by dropping the 5th, allowing for more unique sounds via addional fingerings and/or added notes. The possibilitites are almost limitless, but if you learn the interval positions, scales and chords will make sense anywhere on the fretboard. (We have tried to help by assigning a unique color to each of the chromatic scale positions. ) Unlike playing a piano, where everything is laid out in a straight line, learning the various interval positions is the key to mastering the guitar. Just experiment and don't give up!
Each of the diatonic modes uses the same notes as those of the major scale, which is also called the Ionian mode or first mode of the diatonic major scale. What makes them "modes" is that they each start on a different note of the major scale. So, for example, the Dorian mode starts on the 2nd note of the major scale (2, 3, 4, 5, 6, 7, 1, 2), and considering it's root having thus moved, these can be re-written relative to the new root (1, 2, ♭3, 4, 5, 6, ♭7, 1). Click the "Diatonic Modes" title to show or hide a table that helps illustrate this, and includes standard Roman numeral designations of chord types for each of mode notes. Using this table, you can see that the Dorian, Phrygian and Aeolian modes all have a minor flavor, due to their root chord being a minor chord. Experiment with the modes, which will provide vast opportunities for new melodic and harmonic ideas that you can apply to your own music.
To get the most out of this site, some background in music theory would be helpful. There are many good sites out there that explain the concepts behind intervals, modes, scales and chords. For example, Wikipedia has a good overview with lots of links that expand on individual points. 8notes.com is an excellent site, and goes into detail on many important areas of music theory.
Just keep making music!