Step 1:  Open notepad++ and linking the jquery file in "<head>"

              we link jquery file two way....

            1st way : download jquery file and linking jquery file in your html file in "<head>" tag like this

<script src=" jquery-3.0.0.min.js"></script>

           2nd way :  you don't want to download this file. you can linking CDN file like this    

<script> src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

Step 2 :   The Document Ready Event

$(document).ready(function(){
   // jQuery methods go here...
   });

step 3 :

          Example :1  jQuery effects, including ".hide()", use for hide some element then the link on click like as video.

          Example :2  jQuery effects, including ".show()" use for show hidden element then the link on click like as video.

         Example :3  jQuery effects, including ".slideToggle()" use for hide and show like as video.

         Example :4  jQuery effects, including ".alert();" use for show message like as video.

<html>
	<head>
		<title>test error.com</title>
		<link rel="stylesheet" href="style.css" type="text/css">
		<link href="icon/assets/css/font-awesome.css" rel="stylesheet">
		<script src="jquery-3.0.0.min.js"></script>
	<script>
			$(document).ready(function(){
			$("#hide").hide();
		});
	</script>
	<!-- <script>
		$(document).ready(function(){
		$("#show").click(function(){
			$("#hide").show();
			});
		});
	</script> -->
	<script>
		$(document).ready(function(){
		$("#show").click(function(){
			$("#hide").slideToggle();
			});
		});
	</script>
	<script>
		$(document).ready(function(){
		$(".alert").click(function(){
			alert("Enter the name");
			});
		});
	</script>	
  </head>
   <body>
		<div class="main-div">
			<div class="header">
				<div class="logu">
					<h1>company</h1>
				</div>
				<div class="menu">
					<ul>
						<li><a href="#" class="active">HOME</a><li>
						<li><a href="#">ABOUT US</a><li>
						<li><a href="#">SOLUTIONS</a><li>
						<li><a href="#">PARTNERS</a><li>
						<li><a href="#">SERVICES</a><li>
						<li><a href="#">CONTACTS</a><li>
					<ul>
				</div>
			</div>
			<div class="baner">
				<i class="fa fa-globe"></i><h1>Global</h1><h2>cominication</h2>
				<p id="hide" >This handout will help you understand how paragraphs are formed, how to develop stronger paragraphs, and how to completely and clearly express your ideas.?</p>
				<a id="show" href="#">more</a>
			</div>	
			<div class="contant">
				<div class="business-strategies">
					<i class="fa fa-cog fa-fw" ><i class="fa fa-cog fa-fw" id="icon2" ></i></i>
					<h3>Business strategies</h3>
					<p>This handout will help you understand how paragraphs are formed, how to develop stronger paragraphs, and how to completely and clearly express your ideas.</p>
				</div>
				<div class="business-planing">
					<i class="fa fa-calendar-check-o" ></i>
					<h3>Business planing</h3>
					<p>This handout will help you understand how paragraphs are formed, how to develop stronger paragraphs, and how to completely and clearly express your ideas.</p>
				</div>
				<div class="sing-up">
					<i class="fa fa-envelope-o" ></i>
					<h3>Newsletter sing-up</h3>
					<input type="text" value="Name" onfocus="if(this.value=='Name')this.value='';"></input> <button class="alert">submit</button>
					<p>This handout will help you understand how paragraphs are formed, how to develop stronger paragraphs, and how to completely and clearly express your ideas.</p>
				</div>
			</div>
			<div class="footer">
				<p>&copy; Global comunications All Rights Reserved</p>
				<span>Developed by Tofael</span>
			</div>
		</div>
	</body>
</html>