GuitArtist Article ENG

How GuitArtist has been created..

Written by Krzysztof Kret, 25/05/2020

Kliknij żeby zmienić język na Polski

In this tutorial I will show you how to create website for learn new chordas. And this web which you make, show you new way to learn play guitar ! Just listen, learn and .. have fun !

Step 1 - Download pack

First step is download free start pack from MDB: Click me to download !

Okay you did it ? Nice, inside you will find file index.html .
Open it by some program to programming like Visual Studio Code or Sublime text.

Delete all between <-- Start your project here --> and <-- End your project here -->

Finally your code should look like that: 

          	 	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
			<!-- Bootstrap core CSS -->
			<link href="css/bootstrap.min.css" rel="stylesheet">
			<!-- Material Design Bootstrap -->
			<link href="css/mdb.min.css" rel="stylesheet">
			<!-- Your custom styles (optional) -->
			<link href="css/style.css" rel="stylesheet">
          		       <body>

					 <!-- Start your project here -->

					<!-- End your project here -->

			<!-- SCRIPTS-->
			<!-- JQuery -->
			<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
			<!-- Bootstrap tooltips -->
			<script type="text/javascript" src="js/popper.min.js"></script>
			<!-- Bootstrap core JavaScript -->
			<script type="text/javascript" src="js/bootstrap.min.js"></script>
			<!-- MDB core JavaScript -->
			<script type="text/javascript" src="js/mdb.js"></script>

				</body>

Step 2 - Background

Now we have to choose color of corners. This "effect", makes understand, that page is NOT scrolling, and for me it's seems very good. For this we put cool background, on which our guitar will be.

This code is in the CSS . We can know that becouse you can see, that scripts starting in style . That mean, all inside are responsible for design.

Past this at the bottom of code, under /body , and let me explain. 

           		<style>
				html {
				    background-color: grey;
				}
				html,
				body {
				    height: 100%;
				}
				body {
				    background-image: url(https://d2v9y0dukr6mq2.cloudfront.net/video/thumbnail/BuKKyFq/videoblocks-music-notes-fire-style-background-looped-animation_sae9zw4kb_thumbnail-full01.png);
				    background-size: cover;
				    border: 4px solid #424242;
				    border-radius: 50px;
				}
				img {
				    width: 98%;
				}
			</style>
  • background-color: It's our corners color, try change it. About more Click me!
  • background-image: url(https://(..) After "url" paste the background which supposed to be background for guitar, try find something with the best quality
  • border: 4px solid #424242 This create one line solid border, with width 4px and color #424242.
  • border-radius: It's degree curve of border, change value and check it.

There is nothing more hard so I'll skip the explanation and move forward

Terminally our website should look like that:

Step 3 - Navbar

In this step we'll create navbar. This something like uniform for our website. It is not necessary for that short project, but I like to show you how to create that. In this case it's for elegant.

We do the same, and first I show you code, which you paste in the body 

        		  <nav class="mb-1 navbar navbar-expand-lg navbar-dark lighten-1">
		            <a class="navbar-brand" href="#">GuitArtist</a>
		            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-4"
		              aria-controls="navbarSupportedContent-4" aria-expanded="false" aria-label="Toggle navigation">
		              <span class="navbar-toggler-icon"></span>
		            </button>
		            <div class="collapse navbar-collapse" id="navbarSupportedContent-4">
		              <ul class="navbar-nav ml-auto">
		                <li class="nav-item active">
		                  <a class="nav-link" href="#">
		                    <i class="fab fa-facebook-f"></i> Facebook
		                    <span class="sr-only">(current)</span>
		                  </a>
		                </li>
		                <li class="nav-item">
		                  <a class="nav-link" href="#">
		                    <i class="fab fa-instagram"></i> Instagram</a>
		                </li>
		                <li class="nav-item dropdown">
		                  <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink-4" data-toggle="dropdown"
		                    aria-haspopup="true" aria-expanded="false">
		                    <i class="fas fa-user"></i> Profile </a>
		                  <div class="dropdown-menu dropdown-menu-right dropdown-info" aria-labelledby="navbarDropdownMenuLink-4">
		                    <a class="dropdown-item" href="#">My account</a>
		                    <a class="dropdown-item" href="#">Saved chords</a>
		                    <a class="dropdown-item" href="#">Log out</a>
		                  </div>
		                </li>
		              </ul>
		            </div>
		          </nav>
 Refresh your website. You can see really beauty navbar. But I will tell you something about code. And please, try change values to be sure how this working. Of course you can change all of text. We will focus now on design.

  • On the left of "facebook" "instagram" and "profile" you can see icons. Before name in the code, you can see sth like class="fab fa-facebook-f". Click here and try change icon, inside that class.
  • In first line, in the class you can add color. Try add "blue" or your favorite. More about nav is here . Finally I'll make invisible effect.

I think it's all of this step. Most code should be understanded.

Your navbar should look like that:

Step 4 - Buttons

This time we'll focus on our main part. In this step, we create 6 buttons with name of chords, and one of them is a "demo", which presents combination of all of them. Above them will be text "CLick and listen"

To this part, We will use "grid". That's mean, our website will be responsive.

Learn and read more about grid here : Grid

At the beginning, we create text, but with the grid.

Paste it under /nav :

		<main>
		     <div class="container mt-5">
		      <div class="row justify-content-center text-center">
		        <div class="col-md-12">
		          <h3 class="font-weight-bold"> Click and listen!</h3>
		        </div>
		      </div>
		</main>

Refresh browser. You can see that your text is in the middle of background. it's becouse our grid created it.

Okay, It's time for our buttons.

It's shouldn't be nothing hard, but if you want, you can read more here .

Paste it above /main :

          <div id="przyciski">

          	<div class="row justify-content-center text-center mt-4">
          		<div class="col-md-12">

             <button  class="btn btn-outline-warning waves-effect example z-depth-4">a-moll</button>

             <button class="btn btn-outline-warning waves-effect example z-depth-4">e-moll</button>


             <button class="btn btn-outline-warning waves-effect example z-depth-4">G7</button>


             <button class="btn btn-outline-warning waves-effect example z-depth-4">D</button>


             <button class="btn btn-outline-warning waves-effect example z-depth-4">D-dur</button>


            <button class="btn btn-warning btn-rounded example z-depth-4">Demo</button>
          </div>
      </div>
  </div>
</main>

It's seems very good, right? Our gird sets all of our buttons to middle, and this look just elegant and pleasant for eyes.

It's true, our buttons look very good, but to be honest they just don't working yet. But before we add functions to it, we'll add basic graphic with guitar .

Paste code above /main 
 <!-- guitar -->   
      <div class="row justify-content-center text-center">
        <div class="col-md-12">
                  <img id='guitar1' src="https://i.ibb.co/Nr7tMWg/guitar1.png">
              </div>
          </div>
<!--/guitar -->

Step 5 - Scripts

We have to add scripts, which will change our image, when we click buttons.

To our buttons, we must add onclick, which start script when we click the buttons, and change our photo, on a photo from src .

The buttons-code should look like that: 
          <div id="przyciski">

          	<div class="row justify-content-center text-center mt-4">
          		<div class="col-md-12">
             <button href="#"  onclick="document.getElementById('guitar1').src='https://i.ibb.co/wssd0gh/guitar2.png'" class="btn btn-outline-warning waves-effect example z-depth-4">a-moll</button>

             <button href="#"  onclick="document.getElementById('guitar1').src='https://i.ibb.co/F43FRmK/guitar3.png'" class="btn btn-outline-warning waves-effect example z-depth-4">e-moll</button>

             <button href="#" onclick="document.getElementById('guitar1').src='https://i.ibb.co/SN8vXSr/guitar4.png'" class="btn btn-outline-warning waves-effect example z-depth-4">G7</button>

             <button href="#" onclick="document.getElementById('guitar1').src='https://i.ibb.co/N9V8yqb/guitar5.png'" class="btn btn-outline-warning waves-effect example z-depth-4">D</button>

             <button href="#"  onclick="document.getElementById('guitar1').src='https://i.ibb.co/HzsMc49/guitar6.png'" class="btn btn-outline-warning waves-effect example z-depth-4">D-dur</button>

            <button href="#" onclick="document.getElementById('guitar1').src='https://i.ibb.co/ZmMTLG2/guitar7.png'"" class="btn btn-warning btn-rounded example z-depth-4">Demo</button>
          </div>
      </div>

How you can see, in this code you can find getElementById('guitar1') and "guitar1" is our first basic guitar, earlier we gave him id="guitar1" and getElementById change this id after click. This making our photo is changing.

Step 6 - Sounds

Nice, now you understand how to change photos after click, and how this working. But what with the sound ? In my website which you can find there , the sounds not working. I just can't find any website, which you can add your sound in the mp.3/4 but I will give you a pack with sound and images.

Click here to download sound&image pack.

Now we have to add scripts above our style .

Paste it. Then I tell you how to change values: 

</body>
<script>
 // Gitara dzwieki
var guitarsound1 = new Audio();
guitarsound1.src= "./prezentacja/111.mp3";

var guitarsound2 = new Audio();
guitarsound2.src= "./prezentacja/222.mp3";

var guitarsound3 = new Audio();
guitarsound3.src= "./prezentacja/333.mp3";

var guitarsound4 = new Audio();
guitarsound4.src= "./prezentacja/444.mp3";

var guitarsound5 = new Audio();
guitarsound5.src= "./prezentacja/555.mp3";

var guitarsound6 = new Audio();
guitarsound6.src= "./prezentacja/666.mp3";

</script>
<style>

I'll explain.

  • var guitarsoundx = new Audio assings value Audio, to our guitarsound1/2/3/..
  • In the next line you see guitarsound.src. That's mean, we write url from website or desktop to our soundfile. (e.g guitarsound4.src= is sound from our desktop way: "./prezentacja/444.mp3" ).

If you download my pack, put it in the folder with our website and unpack there. You must change in your code value guitarsoundX.src=(CHAGNE IT)

Okay, scripts exists in our code, but they are not working yet.

We have to back to our buttons in the code. Inside, behind onclick, we have to add onmousedown="(name of scripts, which should play)".play()

Exacly that should look like that: 

<div id="przyciski">

          	<div class="row justify-content-center text-center mt-4">
          		<div class="col-md-12">
             <button href="#" onmousedown="guitarsound2.play()" onclick="document.getElementById('guitar1').src='https://i.ibb.co/wssd0gh/guitar2.png'" class="btn btn-outline-warning waves-effect example z-depth-4">a-moll</button>

             <button href="#" onmousedown="guitarsound3.play()" onclick="document.getElementById('guitar1').src='https://i.ibb.co/F43FRmK/guitar3.png'" class="btn btn-outline-warning waves-effect example z-depth-4">e-moll</button>


             <button href="#" onmousedown="guitarsound4.play()" onclick="document.getElementById('guitar1').src='https://i.ibb.co/SN8vXSr/guitar4.png'" class="btn btn-outline-warning waves-effect example z-depth-4">G7</button>


             <button href="#" onmousedown="guitarsound5.play()" onclick="document.getElementById('guitar1').src='https://i.ibb.co/N9V8yqb/guitar5.png'" class="btn btn-outline-warning waves-effect example z-depth-4">D</button>


             <button href="#" onmousedown="guitarsound6.play()" onclick="document.getElementById('guitar1').src='https://i.ibb.co/HzsMc49/guitar6.png'" class="btn btn-outline-warning waves-effect example z-depth-4">D-dur</button>


            <button href="#" onmousedown="guitarsound1.play()" onclick="document.getElementById('guitar1').src='https://i.ibb.co/ZmMTLG2/guitar7.png'"" class="btn btn-warning btn-rounded example z-depth-4">Demo</button>
          </div>
      </div>

Refresh, now your website should working well.

Step 7 - Refresh

To ending we can add refresh button. It will be elegant and useful, becouse we can't stop the sounds

Paste this code above /main 

		<!-- /gitara -->
				<!-- refresh -->
				    <div class="row fixed-bottom-right">
				      <div class="col-md-2 text-left">
				        <a type="button" class="btn-floating black refresh"><i class="fas fa-sync" aria-hidden="true"
				           onClick="refreshPage()"></i></a>
				      </div>
				    </div>
				  </div>
		</main>

We creating black, circle button. I remind, you can read more about it here . But the button don't working yet. We must add to script some codes. You can change too i class="fas fa-sync to change icon .

Copy and paste to script section 

			<script>

			// Stop the musio (refresh)
			function refreshPage(){
			    location.reload();
			}

Now your website is ready for learning ! I hope you had fun to create it !


Congratulation, our website was finished !