128 lines
4.8 KiB
HTML
128 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<title>Chord Book</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
|
|
<style>
|
|
img {
|
|
max-width: 250px;
|
|
}
|
|
|
|
.container {
|
|
max-width: 800px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
/* container */
|
|
.responsive-three-column-grid {
|
|
display:block;
|
|
}
|
|
|
|
/* columns */
|
|
.responsive-three-column-grid > * {
|
|
padding:1rem;
|
|
}
|
|
|
|
/* tablet breakpoint */
|
|
@media (min-width:768px) {
|
|
.responsive-three-column-grid {
|
|
display: grid;
|
|
grid-auto-rows: 1fr;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<div class="container">
|
|
<h1>Dominic DiTaranto Chord Book</h1>
|
|
<p>Provided below are the diagrams of the chords I use the most frequently. I used <a href="https://www.guitarbased.com/diagram-maker/">this site</a> to create the diagrams.</p>
|
|
|
|
<b>How To Use:</b>
|
|
<ul>
|
|
<li>All chords are note agnostic unless noted otherwise. In other words, you can move them around the fretboard wherever you want</li>
|
|
<li>Low E string is to the left</li>
|
|
<li>Sometimes there are X marks for mutes, sometimes there are not, I don't know why. Either way, if it is not explicitly noted with an O mark behind the nut in the diagram, all strings without yellow dots are to be muted!</li>
|
|
<li>Common chords are not included, this is for intermediate players.</li>
|
|
<li>I rely heavily on using my thumb to play notes on the low E string. You should learn how to do this! why not use all 5 fingers if you can?</li>
|
|
<li>There is no real order to these chords, they are grouped into sections based on how I group them in my mind.</li>
|
|
<li>Haters are gonna say that chord voicings do not matter and it sounds the same wherever you play the chord. They are just haters though.</li>
|
|
</ul>
|
|
|
|
<b>Last Updated:</b> Sat Dec 20 20:16:22 EST 2025
|
|
|
|
<hr>
|
|
|
|
<h3>I - Derivatives of the min7 shape</h3>
|
|
<p>I have essentially discovered all of these chords for myself by playing around with the min7 shape pictured below as the first chord. I play the low E string with my thumb on the majority of these chords. Examples in which I do not use my thumb are: 7b13 and 9sus4 (sometimes I do, depends on the situation). These chords make up the bulk of what I play.</p>
|
|
|
|
<div class="responsive-three-column-grid">
|
|
<div><img src="assets/m7/minor7.png" alt=""></div>
|
|
<div><img src="assets/m7/7sus2.png" alt=""></div>
|
|
<div><img src="assets/m7/m11.png" alt=""></div>
|
|
</div>
|
|
<div class="responsive-three-column-grid">
|
|
<div><img src="assets/m7/m13.png" alt=""></div>
|
|
<div><img src="assets/m7/7sharp9sus2.png" alt=""></div>
|
|
<div><img src="assets/m7/6sus2b5.png" alt=""></div>
|
|
</div>
|
|
<div class="responsive-three-column-grid">
|
|
<div><img src="assets/m7/7b13.png" alt=""></div>
|
|
<div><img src="assets/m7/M7.png" alt=""></div>
|
|
<div><img src="assets/m7/M13.png" alt=""></div>
|
|
</div>
|
|
<div class="responsive-three-column-grid">
|
|
<div><img src="assets/m7/Msharp11.png" alt=""></div>
|
|
<div><img src="assets/m7/9sus4.png" alt=""></div>
|
|
</div>
|
|
|
|
<hr>
|
|
<h3>II - Chords on the A string</h3>
|
|
<p>Yeah, I cannot really think of another way to classify these.</p>
|
|
|
|
<div class="responsive-three-column-grid">
|
|
<div><img src="assets/a-string/M9.png" alt=""></div>
|
|
<div><img src="assets/a-string/6add9.png" alt=""></div>
|
|
<div><img src="assets/a-string/m6add9.png" alt=""></div>
|
|
</div>
|
|
<div class="responsive-three-column-grid">
|
|
<div><img src="assets/a-string/msharp5add9.png" alt=""></div>
|
|
<div><img src="assets/a-string/madd9.png" alt=""></div>
|
|
<div><img src="assets/a-string/m9.png" alt=""></div>
|
|
</div>
|
|
<div class="responsive-three-column-grid">
|
|
<div><img src="assets/a-string/sus2.png" alt=""></div>
|
|
<div><img src="assets/a-string/7sus2.png" alt=""></div>
|
|
</div>
|
|
|
|
<hr>
|
|
<h3>III - Triads</h3>
|
|
<p>Not necessarily 1-3-5, but chords with just three notes</p>
|
|
<div class="responsive-three-column-grid">
|
|
<div><img src="assets/triads/6sus4.png" alt=""></div>
|
|
<div><img src="assets/triads/sus4.png" alt=""></div>
|
|
<div><img src="assets/triads/m7.png" alt=""></div>
|
|
</div>
|
|
<div class="responsive-three-column-grid">
|
|
<div><img src="assets/triads/M7.png" alt=""></div>
|
|
<div><img src="assets/triads/M72.png" alt=""></div>
|
|
<div><img src="assets/triads/M73.png" alt=""></div>
|
|
</div>
|
|
<div class="responsive-three-column-grid">
|
|
<div><img src="assets/triads/M7omit3.png" alt=""></div>
|
|
</div>
|
|
<hr>
|
|
<h3>Notes:</h3>
|
|
<ul>
|
|
<li>I will add more chords as they come up</li>
|
|
<li>I will eventually add a search feature</li>
|
|
</ul>
|
|
</div>
|
|
</body>
|
|
</html>
|