diff --git a/index.html b/index.html
index ec8c617ee5cbc75fa90b32fb1fb98ae6524da7a1..9e0bef1fb212d34573264a00eec737a42dc3d641 100644
--- a/index.html
+++ b/index.html
@@ -39,8 +39,16 @@ SOFTWARE.
 		</script>
 		<script type="text/javascript" src="gl-matrix.js"> 
 		</script>
-		<script type="text/javascript" src="script_step1.js">
-		</script>
+		<style>
+			code {
+				font-family: Consolas,"courier new";
+				color: crimson;
+				background-color: #f1f1f1;
+				padding: 2px;
+				font-size: 105%;
+			}
+		</style>
+
 
 		<script> 
 		window['mat4'] = glMatrix.mat4;
@@ -52,37 +60,85 @@ SOFTWARE.
 	<body onload="main()">
 	    <canvas id="canvas" width="600" height="400"></canvas>
 	<h2></br></br>Before we start! You have to prepare...</h2>
-	<p>Our tutorial doesn't teach you the basic things of WebGL.</br>
-	We will start with a code of self-rotating 3D cube.</br>
-	The prepared code and the output of the code should be like this.</p>
-	<img src=self-rotating-cube.gif></img></br>
-	<p>If you don't have any codes of self-rotating 3D cube, use this code and follow me!</p>
+	<p>
+		Our tutorial doesn't teach you the basic things of WebGL.</br>
+		We will start with a code of self-rotating 3D cube.</br>
+		The prepared code and the output of the code should be like this.</br>
+		<object data = "cube.txt", width="600", height="400"></object>
+		<img src="self-rotating-cube.gif"></img></br>
+		If you don't have any codes of self-rotating 3D cube, use this code and follow me!</br>
+	</p>
 
 	<h2></br></br>Let's begin!</h2>
 	<h3>Step1. Remove some codes.</h3>
-	<p>In this step, we will modify some codes. </br>
-	Our tutorial is to make a mouse dragging transformation camera. </br>
-	So we'll remove some unneeded codes. </br>
-	These are the codes that should be removed. BUTTON????NEED TO SHOW CODES THAT SHOULD BE REMOVED!! </br>
-	This is the final code and the result of the step 1.</p>
-	<object data = "script_step1.js", width="600", height="400"></object>
+	<p>
+		In this step, we will modify some codes. </br>
+		Our tutorial is to make a mouse dragging transformation camera. </br>
+		So we'll remove some unneeded codes. </br>
+		These are the codes that should be removed. </br>
+		<code>var angle = 0;</code></br>
+		<code>var rotx = new Float32Array(16);</code> </br>
+		<code>var roty = new Float32Array(16);</code> </br>
+		<code>var rotz = new Float32Array(16);</code> </br>
+		<code>mat4.rotate(rotx, idtmat, angle, [-5,5,-5]);</code> </br>
+		<code>mat4.rotate(roty, idtmat, angle, [0,5,0]);</code> </br>
+		<code>mat4.rotate(rotz, idtmat, angle, [0,0,5]);</code> </br>
+		<code>mat4.mul(wldmatrix, rotx, roty);</code> </br>
+		<code>mat4.mul(wldmatrix, wldmatrix, rotz);</code> </br>	
+		These codes were for self rotation of the cube. </br>
+		So these don't be needed! </br>
+		This is the final code and the result of the step 1. </br>
+		<object data = "script_step1.txt", width="600", height="400"></object>
+		<img src="script_step1_output.png", width="600", height="400"></img></br>
+		It's just showing the front face of the cube.</br>
+	</p> 
 
 	<h3></br></br>Step2. Use new variables.</h3>
-	<p>As you know, our model camera should be move around the cube by the dragging. </br>
-	In our screen, we can move the mouse "Up-Down", and "Left-Right". </br>
-	See the below. </br>
-	<img src=rotatingx.gif></img> </br>
-	The cube rotating "Up-Down" is x axis rotation. </br></br>
-	<img src=rotatingy.gif></img> </br>
-	And the cube rotating "Left-Right" is y axis rotation. </br>
-	BUTTONS TO THE NEXT VARIABLES!!!!!! </br>
-	So we will add 2 variables, x_rad and y_rad. </br>
-	Then, using x_rad, wldmatrix will be rotated by x axis. </br>
-	Also, using y_rad, wldmatrix will be rotated by y axis. </br>
-	This is the final code and the result of the step 2.</p>
-	<object data = "script_step2.js", width="600", height="400"></object>
-	
+	<p>
+		As you know, our model camera should be move around the cube by the dragging. </br>
+		In our screen, we can move the mouse "Up-Down", and "Left-Right". </br>
+		See the below. </br></br>
+
+		<img src="rotatingx.gif"></img> </br>
+		The cube rotating "Up-Down" is x axis rotation. </br></br>
+
+		<img src="rotatingy.gif"></img> </br>
+		And the cube rotating "Left-Right" is y axis rotation. </br></br>
+
+		So we will add 2 variables, <code>x_rad</code> and <code>y_rad</code>.</br>
+		Then, using <code>x_rad</code>, <code>wldmatrix</code> will be rotated by x axis. </br>
+		Also, using <code>y_rad</code>, <code>wldmatrix</code> will be rotated by y axis. </br>
+		These two variables, <code>x_rad</code> and <code>y_rad</code> will be also used in the other function, so they will be a global variables. </br>
+		This is the final code and the result of the step 2. </br>
+		<object data = "script_step2.txt", width="600", height="400"></object></br>
+		Still, we don't add any codes for mouse dragging, so the cube's just showing the front face. </br>
+	</p>
+
+	<h3></br></br>Step3. Add some codes so that the mouse can drag the cube!</h3>
+	<p>
+		It's almost done!</br>
+		In this step, we will use <code>EventListener</code> of JS and HTML DOM event.</br></br>
+		We need 3 functions, <code>Downward</code>, <code>upward</code>, <code>Moving</code>, and 1 variable <code>drag</code>.</br></br>
 		
+		When you clicked the canvas, the <code>Downward</code> function will be run. </br>
+		<code>Downward</code> stores the dragging point's coordinate values. </br>
+		The dragging point is the starting point of the mouse movement.</br>
+		Using <code>pageX</code> and <code>pageY</code>, we can get the dragging point's coordinate values. </br>
+		Each coordinate values will be stored to <code>original_x</code> and <code>original_y</code>.</br>
+		And make the <code>drag</code> value to <code>true</code>.</br></br>
+
+		When you don't click the canvas, the <code>Upward</code> function will be run. </br>
+		<code>Upward</code> do nothing except changing the <code>drag</code> value to false. </br></br>
+
+		When you move your mouse, the <code>Moving</code> function will be run. </br>
+		<code>Moving</code> gets the mouse's new coordinates. </br>
+		Then, using the <code>original_x</code>, <code>original_y</code>, <code>pageX</code> and <code>pageY</code>, we will get <code>gap_x</code> and <code>gap_y</code>. </br>
+		These two values, <code>gap_x</code> and <code>gap_y</code>, is the difference between original coordinates and new coordinates(present coordinates). </br>
+		Using <code>gap_x</code> and <code>gap_y</code>, we will change the <code>x_rad</code> and <code>y_rad</code>. </br>
+		
+		But, when you don't dragging and just moving your mouse cursor, 
+
+	</p>
 	</body>