codinggiri

JavaScript Exercise Session 1st

Unknown 0 JavaScript Dirty Tutorial Saturday, March 29, 2014

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-IBD3rpiuEy4/UzcIM2z-5_I/AAAAAAAAALU/p3_ikCicGnY/s1600/JavaScript-logo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="http://1.bp.blogspot.com/-IBD3rpiuEy4/UzcIM2z-5_I/AAAAAAAAALU/p3_ikCicGnY/s1600/JavaScript-logo.png" width="400" /></a></div>
<br />
Hey There ! Hope you are enjoying your Learning. Today I am going to Post 5 problem in JS so that you can solve those with JS Approch. Before starting to solve Problems Please Go through a Quick Look to basic JS Rules etc.<br />
<br />
<h3>
The Basic Syntax Rules of JS</h3>
<ol>
<li>JavaScript is Case Sensitive. Thats Means Java, JAVA and java are three diffrent things for JavaScript Interpreter</li>
<li>JavaScripts Ignore the extra whitespaces within statements</li>
<li>Each JS statement ends with a semicolon (i called them "Terminators" because they terminate the staement)</li>
</ol>
<br />
<h3>
Rules for Creating Identifires in JavaScripts</h3>
<ol>
<li>Identifires can only contain letter,numbers,the underscore and the dollor($) sign.</li>
<li>Identifires can't starts with a number. like 1337x is not legal.</li>
<li>Identifires are Case Sensitive</li>
<li>Identifires can be any lenth</li>
<li>Identifires can't be the same as represented words(KeyWords).The list of KeyWords or Reserved Words below</li>

</ol>
<br />
<blockquote>
Don't be confuse about Identifires. Identifires are the name we give to the variables , objects, functions, properties and methods like <i>var ved = 5;</i>. Here ved is the name i gave to the variable so it's (ved) is an Identifire </blockquote>
<br />
<h3>
Using Comments in JavaScript</h3>
Comments are very Important part of any programming language.Just imagine that you are a programmer(don't just imagine, feel it :) ) , You wrote some lines of code of any software or website and you coded it very rough so that only you are able to understand the code easily , for others it will be pain in ass to understand the code but if you commented your code nicely it will not only help the other developers to understand the code but it will help you too. So it's always a good desition to comment your code<br />
Well in JS there are two types of comments<br />
<ol>
<li>Single line comment</li>

<pre class="prettyprint lang-js">
 //This is a single line of comment in JavaScript
</pre>
<li>Multi line comment</li>

<pre class="prettyprint lang-js"> 
 /*
  This is a multi Line Comment
  */
</pre>
</ol>
<br />
<h3>
JavaScript Data Types</h3>
Programming is more like playing/manuplating with data (we input data and we get data stuff) and there are Data Type to perform diffrent kind of manuplation. Let's Have a Quick look to it.<br />
<br />
JavaScript provide three primitive(again don't confused iwth "primitive" we will cover it later )<br />
<ol>
<li>The number Data Type</li>
Number data type can be used to represent either integers or decimal values. Integers are whole numbers like 45,98,64,6,8, etc. and decimal values are number that can have one or more decimal digits. like 34.5, 56.8, etc<br />
<li>The string Data Type</li>
To represent string data , you code the srtring within single or double quotation marks like 
		
	<br />
<li>The boolean data Type</li>
To represent Boolean data you code either the word "true" or "false"<br />

</ol>
<br />
<h3>
Excercises:-</h3>
There are 5 question in this series. Please don't cheat if you really want to be a good developer.(I will Post the Solution with code and description so that you can have a better understanding of Js and once again Please don't Cheat :) <br />
<ol>
	
<li>Use the console.log or alert , to Display this simple message: <br />
		<blockquote>
"Hello ! JavaScript"</blockquote>
</li>

<li>Take three variables a,b and c. assign some integer values to first two variables a nd b. now show assign (a and b) sum (+) , diffrence(-) and multiplication(*) values in to variable c
		<br />
		<blockquote>
HINT: use mathematical operators and use <i>console.log</i> or <i>alert</i> to display outputs</blockquote>
</li>
<br />
	
<li>Take a variable A, now use <i>prompt</i> to ask  user his/her name and print a greeting message.
		<br />
		<blockquote>
HINT:- You have to store the value of what user will input into the variable A. Later then you can use console.log or alert to display the greeting message </blockquote>
</li>
<br />
	
<li>Take a variable A and print the square value.
		<br />
		<blockquote>
HINT:- Well use your comman sence here :p .</blockquote>
</li>
<br />
<li>
We are going to find out the area of a rectangle so for that
		Take Three variables named first,second and Final.
		use <i>prompt</i> to ask user to give the length and width, then store the area of rectangle into third variable and finally print the area.
		<br />
		<blockquote>
HINT:- formula is [area of rectangle = Length x Width]</blockquote>
</li>
</ol>
<br />
Practice it and i will post the solution with code and description in next post:) </div>

JavaScript Exercise Session 1st

Hey There ! Hope you are enjoying your Learning. Today I am going to Post 5 problem in JS so that you can solve those with JS Approch. B...

JavaScript Quick and Dirty Tutorial-Part - 3 ,(Working with Variables and Data Types in JavaScript)

Unknown 0 JavaScript Dirty Tutorial Thursday, March 20, 2014

<div dir="ltr" style="text-align: left;" trbidi="on">
Hey There Guys. Welcome to the third post of this series "Quick and Dirty Introduction to JavaScript". Today we will encounter variables in JavaScript.
Please not that variables are very important part of any programming language , because programming is like playing with data and to play with data we must store it somewhere.
and we store data in variables.try to remember your high schools math's book there ere variables and constants. Yes variables in JavaScript is same like that.
we were using variables in algebra like , a=5,b=10,b=a+b etc. but in JavaSCript we can take variables as full names like<br />
<pre class="prettyprint lang-js">var first_number = 10;
var second_number = 15;
var third_number = first_number + second_number;
alert(third_number);
</pre>
Creating a Variable in JavaScript is a three way Process.
<br />
<ol>
<li>Declaring a variable</li>
<li>Giving it a unique name</li>
<li>Assign a value to your variable  </li>
</ol>
like lets take an example you want to create a new variable, for that you would type
<br />
<pre class="prettyprint">var dev = 17;
</pre>
Here var is a Keyword (don't be confused we will cover the keywords in JavaScript later ) which tells the JavaScript interpreter that dev is a unique name and 17 is it's value.<br />
<h3>
Rules you must follow while working with variables in JS</h3>
Well there are few rules in JS which you must follow like<br />
<ol>
<u>
<li>JavaScript is Case Sensitive </li>
</u>
Yes Folks JS is Case Sensitive that means ved,Ved and VED all three are different from each other <br />

<u>
<li>You must begin with a letter,$ or _</li>
</u>
That means Ved, My_Num, $My_pay, _NewYork are correct but 1india,%bills,*Jesus are not  <br />

<u>
<li>Your variable name must contain number,$,letters and _  </li>
</u>
You  can’t  use spaces or any other special characters anywhere in the variable name: fish&chips
and fish and chips aren't legal, but fish_n_chipsand plan9are.<br />

</ol>
<h3>
Assigning Variables </h3>
To assign a variable you must declare a variable then give it a unique name and in last give it a value like<br />
<pre class="prettyprint"> var my_age = 22;
</pre>
Here Var is keyword , my_age is the unique name and 22 is the value of variable my_age<br />
<h3>
 Working with Variables and Data Types in JavaScript </h3>
As i told you before that programming is more like playing with data, we play with data and we get new data ummmm like we take three variables
a,b and c.we assign values to a  and  b like a = 5, b = 10 anc c = a+b. see what goes on here that we manipulate the data to get new data  
<br />
<pre class="prettyprint lang-js"> var a = 5;
 var b = 10;
 var c = a+b;
</pre>
To manipulate we use operators like in c = a+b, + is the operator. In JavaScript there are different operators for 
different data types<br />
<h3>
Basic Mathematics with JavaScript</h3>
JavaScript Supports Basic Mathematical operations (see the table below)<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-bLOUFe5MdxM/Uypc7WWNwwI/AAAAAAAAAKc/kLHaQzanP3k/s1600/Snap+2014-03-20+at+08.39.00.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-bLOUFe5MdxM/Uypc7WWNwwI/AAAAAAAAAKc/kLHaQzanP3k/s1600/Snap+2014-03-20+at+08.39.00.png" /></a></div>
<br />

<br />
Lets take an example of Basic Math in JavaScript<br />
<pre class="prettyprint lang-js">    var priceOfOne = 15;
    var totalItem = 5;
    var totalCost = priceOfOne * totalItem;
    alert (totalCost);
</pre>
In Next Post i will Post some Simple JavaSCript Programs so that you can do exercise. Thanks for reading, see you in next Post :)</div>

JavaScript Quick and Dirty Tutorial-Part - 3 ,(Working with Variables and Data Types in JavaScript)

Hey There Guys. Welcome to the third post of this series "Quick and Dirty Introduction to JavaScript". Today we will encounter va...

JavaScript Quick and Dirty Tutorial-Part - 2 ,(Writing JavaScript Code and Indroduction to JS console in Chrome & Firefox)

Unknown 4 JavaScript Dirty Tutorial Thursday, March 20, 2014

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-Y2Y4C4wdvc0/UynP_iX7QjI/AAAAAAAAAJk/_jeQA7vrBGo/s1600/Snap+2014-03-19+at+22.41.55.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-Y2Y4C4wdvc0/UynP_iX7QjI/AAAAAAAAAJk/_jeQA7vrBGo/s1600/Snap+2014-03-19+at+22.41.55.png" /></a></div>
<br />
Hey there Guys ! Welcome to the second post of this series "Quick and Dirty Introduction to JavaScript". In this post we will learn how to write JavaScript
Programs. Well There are two ways to write JavaScript Programs (if you are a beginner in JavaScript ) and the two methods are
<br />
<ol>
<li>Putting your JS in HTML</li>
<li>Writing JS in Browser's Console</li>
</ol>
Lets take the first method first. Now we will put our JS code in HTML document to execute.first we need a HTML(core markup). Here it is 
<br />
<pre class="prettyprint"><!doctype html>
<html>
 <head>
  <title>JS in HTML</title>
   
  <script type = "text/javascript">
   alert("Hello ! Javasript ");
  </script> 
 </head>
 <body>
 
 </body>
</html>
</pre>
save that code with a .html extension and run it in your browser it will execute and show a message box in your browser like this<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-Q1XVfExiXL0/UynQ04IEuZI/AAAAAAAAAJs/UHfFERfm9tk/s1600/Snap+2014-03-19+at+22.15.25.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-Q1XVfExiXL0/UynQ04IEuZI/AAAAAAAAAJs/UHfFERfm9tk/s1600/Snap+2014-03-19+at+22.15.25.png" /></a></div>
<br />

<br />
The second Method is Writing JavaScript into Browser's Console. I am using Coogle Chrome but you are free to use any other as wel. <br />
To open JavaScript Console in Chrome follow this<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-7ctbQr7HfhA/UypPiKNT8RI/AAAAAAAAAJ8/UCvVzGzAORE/s1600/Snap+2014-03-19+at+22.23.54.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-7ctbQr7HfhA/UypPiKNT8RI/AAAAAAAAAJ8/UCvVzGzAORE/s1600/Snap+2014-03-19+at+22.23.54.png" /></a></div>
<br />
<br />

After this you will see a JS Console like this<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-ZVWIkDfU3gY/UypQPX3i6tI/AAAAAAAAAKE/5r6wOcpxFNA/s1600/Snap+2014-03-19+at+22.26.24.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-ZVWIkDfU3gY/UypQPX3i6tI/AAAAAAAAAKE/5r6wOcpxFNA/s1600/Snap+2014-03-19+at+22.26.24.png" /></a></div>
<br />

<br />
now you can directly Execute JS from Your Browser follow the ScreenShot Below<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-J5vnne9aGaA/UypQmzgZieI/AAAAAAAAAKM/LxzlI5d4nWs/s1600/Snap+2014-03-19+at+22.32.54.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-J5vnne9aGaA/UypQmzgZieI/AAAAAAAAAKM/LxzlI5d4nWs/s1600/Snap+2014-03-19+at+22.32.54.png" /></a></div>
<br />

<br />
So now you know how to write JavaScript by both methods. In Next Post<br />
<br />
<br />
<h3>
I know there are some firefox fans so i am gonna write a little on Js Console in Firefox and Installing Firebug</h3>
follow the screenshot below<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-dny1uYWfDzQ/UzA4oxF-rOI/AAAAAAAAAKs/KGsD1yg1QDA/s1600/Snap+2014-03-24+at+19.21.44.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-dny1uYWfDzQ/UzA4oxF-rOI/AAAAAAAAAKs/KGsD1yg1QDA/s1600/Snap+2014-03-24+at+19.21.44.png" /></a></div>
<br />
Lets take the firefox's built in Js Console first press ctrl + shift + j and you will see something like this (screenshot below) <br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-3jgMZFBxZL8/UzA8Mbn0CUI/AAAAAAAAAK4/o1lTEj5ZmU0/s1600/Snap+2014-03-24+at+19.37.18.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-3jgMZFBxZL8/UzA8Mbn0CUI/AAAAAAAAAK4/o1lTEj5ZmU0/s1600/Snap+2014-03-24+at+19.37.18.png" /></a></div>
<br />
Now lets take the second option which is Scratch Pad , Press Shift + f4 and the Scratch Pad window will appear(Screenshot below)<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-n32AkLWFEIY/UzA88NN4mSI/AAAAAAAAALA/AXzGtsqmRoU/s1600/Snap+2014-03-24+at+19.40.27.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="270" src="http://1.bp.blogspot.com/-n32AkLWFEIY/UzA88NN4mSI/AAAAAAAAALA/AXzGtsqmRoU/s1600/Snap+2014-03-24+at+19.40.27.png" width="640" /></a></div>
<br />
You can also run your JS from There<br />
We will Take a Step forward to learn more about JavaScript 
If you have any problem in finding JavaScript Console in Any Other Browser Please Comment. See you in Next Post Thanks For Reading</div>

JavaScript Quick and Dirty Tutorial-Part - 2 ,(Writing JavaScript Code and Indroduction to JS console in Chrome & Firefox)

Hey there Guys ! Welcome to the second post of this series "Quick and Dirty Introduction to JavaScript". In this post we will ...

JavaScript Quick and Dirty Tutorial, Part - 1

Unknown 0 JavaScript Dirty Tutorial Wednesday, March 19, 2014

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-kl6UqVQgJC8/UykxNKW0IwI/AAAAAAAAAJU/e_8hckTLbsk/s1600/JavaScript-Logo.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="197" src="http://1.bp.blogspot.com/-kl6UqVQgJC8/UykxNKW0IwI/AAAAAAAAAJU/e_8hckTLbsk/s1600/JavaScript-Logo.png" width="200" /></a></div>
<br />
Hey There Guys. Welcome to the first post of this series "Quick and Dirty Introduction to JavaScript". You are here because you want to 
 learn JavaScript from Scratch and in a very little time.
<br />
Please note that if you know some other programming languages , then you'll find out that JavaScript is a high-level, dynamic, untyped interpreted programming language
that is well-suited to object-oriented and functional programming styles. To created a beautiful web page it needs three major ingredients<br />
<br />
<br />
<ol>
<li>HTML (for structure)</li>
<li>CSS(For Presentation)</li>
<li>JavaScript(For Behaviour)</li>
</ol>
JavaScriptis is a programming language that lets you supercharge your HTML with animation, interactivity, and dynamic visual effects.
You can add a lot of functionality to your HTML with JavaScript like, if you’ve filled out an online form and  
hit  the  “submit”  button,  the  web  page  can  use 
JavaScript to check your entries in real-time and 
alert you almost instantly if you had filled out the 
form incorrectly.<br />
<br />
JavaScript can make web pages more useful by supplying immediate feedback from your Website Visitor.
<br />
<br />
A JavaScript-powered shopping cart page can instantly display a total cost, 
with tax and shipping, the moment a visitor selects a product to buy. JavaScript can 
produce an error message immediately after someone attempts to submit a web form 
that’s missing necessary information and it's all take no time at all because JavaScript Execute on Client's Side (Your Browser) not on a Server.
<br />
<h3>
A quick look to the history of JavaScript</h3>
JavaScript was Developed at Netscape in the early days of the World Wide Web and JavaScript is nearly as old as the web itself,technically, “JavaScript” is a trademark licensed from Sun Micro systems (now Oracle)
used to describe Netscape’s (now Mozilla’s) implementation of the language. Netscape submitted the
language for standardization to ECMA—the European Computer Manufacturer’s Association—and because of trademark issues, the standardized version of the language
was stuck with the awkward name “ECMAScript.” For the same trademark reasons,
Microsoft’s version of the language is formally known as “JScript.” In practice, just
about everyone calls the language JavaScript.
<br />
<blockquote>
There is not a single similarity between Java and JavaScript.JavaScript was originally 
named LiveScript, but the marketing guys at Netscape decided they’d get more publicity if they tried to 
associate the language with the then-hot Java. Don’t make the mistake of confusing the two…especially 
at a job interview
</blockquote>
<h3>
Writing JavaScript and Executing it Directly from your Browser.</h3>
All Major Browsers like Google Chrome, Apple Safari , Mozilla FireFox, Opera and IE (IE sucks Don't Use it )
comes with a integrated JavaScript Console. In This Series i will mostly use Chrome's JavaScript Console but you are free to use any other as well.In Future Tutorials in this Series , I will Introduce you to FireBug and tell you how to use it so that you can develop website rapidly.In Next tutorial we will write our firs JavaScript Program. Thanks for reading, See you in next post   
</div>

JavaScript Quick and Dirty Tutorial, Part - 1

Hey There Guys. Welcome to the first post of this series "Quick and Dirty Introduction to JavaScript". You are here because yo...

Create awesome capsule buttons with pure CSS3

Unknown 2 Monday, March 17, 2014

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-q16Q56dbsog/Uya4Mo33AOI/AAAAAAAAAI4/52HsSpawLw4/s1600/pr2.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="400" src="http://1.bp.blogspot.com/-q16Q56dbsog/Uya4Mo33AOI/AAAAAAAAAI4/52HsSpawLw4/s1600/pr2.png" width="296" /></a><a href="http://4.bp.blogspot.com/-dObZaJAcrlQ/Uya4Ql_3HhI/AAAAAAAAAI8/zYBC0F3so-A/s1600/pr1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"></a></div>
<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
Hey ! there guys welcome to codinggiri once again. Today we are going to code a really beautiful CSS3 button with a really cool animation and guess what we are not going to use any JavaScript for that.These animated buttons are very handy and useful when you want to show some hidden text or picture on :hover.<br />
<br />
This tutorial is for those who knows a little about CSS3. beginners will feel a little confused but don't worry i am going to post a series of tutorial very soon on CSS3<br />
<br />
Ok so lets code our mark up (HTML5) first</div>
<pre class="prettyprint"><code class="language-html">


 
<!doctype html>
<html>
 <head>
  <title>Cyclades CSS3 Capsule button</title>
  <link href = "hidden-text.css" rel = "stylesheet" type = "text/css"/>
  <link href='http://fonts.googleapis.com/css?family=Offside' rel='stylesheet' type='text/css'/>
 </head>
 <body>
  <h1 align = "center">Cyclades CSS3 Capsule button</h1>
  <h3 align = "center">
   
  </h3>
  <h3 align="center">
   Cyclades CSS3 Capsule buttons are really usefull and beautiful when 
   you want to show some hidden text on <i>:hover</i> with really cool animation
   To take a Tour Please Scroll DOwn and Hover on the button :)</h3>
   
   <h3 align = "center">Please <a href="mailto:linuxlover94@gmail.com">Email ME</a> if you have any question or problems.</h3>
   
   
   <h3 align = "center">Once Again Thank You</h3>
   
  <div class = "button-wrap">
   <a  class = "main-button">
    <span class = "main-button-text">Hover me</span>
    <span class = "main-button-hidden-text">CSS3</span>
    <span class = "divider"><span></span></span>
   </a>
   <br/>
   <br/>
   <br/>
   <a class = "main-button-2">
    <span class = "main-button-text">Hover me</span>
    <span class = "main-button-hidden-text">CSS3</span>
    <span class = "divider"><span></span></span>
   </a>
   <br/>
   <br/>
   <br/> 
   
   <a class = "main-button-3">
    <span class = "main-button-text">Hover me</span>
    <span class = "main-button-hidden-text">CSS3</span>
    <span class = "divider"><span></span></span>
   </a>
   
   <a class = "main-button-4">
    <span class = "main-button-text">Hover me</span>
    <span class = "main-button-hidden-text">CSS3</span>
    <span class = "divider"><span></span></span>
   </a>
   <br/>
   <br/>
   <br/>
   
   <a class = "main-button-5">
    <span class = "main-button-text">Hover me</span>
    <span class = "main-button-hidden-text">CSS3</span>
    <span class = "divider"><span></span></span>
   </a>
   <br/>
   <br/>
   <br/>
   
  </div>
  <br/>
  <br/>
  <br/>
  
 </body>
</html></code></pre>
<pre class="prettyprint"><code class="language-html"> </code></pre>
<br />
<a href="http://2.bp.blogspot.com/-ooHS4Agn25k/Uya2hvHIiiI/AAAAAAAAAIo/Xmc0EWCeF4Q/s1600/Snap+2014-03-17+at+14.15.22.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-ooHS4Agn25k/Uya2hvHIiiI/AAAAAAAAAIo/Xmc0EWCeF4Q/s1600/Snap+2014-03-17+at+14.15.22.png" /></a><br />
After that save the code with a file name index.html (Please don't forget to save it with a .html extension).Run the html file into your browser and it will look something like this  
It is looking ugly. SO what we are waiting for lets code our css for this.</div>
<pre class="prettyprint"><code class="language-css">
/*Ved Prakash Pandey*
/*2014-03-17*/

body{
background-image:url(debut_dark.png);
}
h1, h3, h3 a{
color:#FFFFFF;
font-family:'Offside', cursive;
}
.button-wrap{
margin:5%;
margin-left:45%;
}
.main-button{
background:#1DA548;
padding-right:50px;
padding-left:50px;
display:inline-block;
height:60px;
overflow:hidden;
/*transition*/
-webkit-transition:all 0.5s ease-in-out;
   -moz-transition:all 0.5s ease-in-out;
     -o-transition:all 0.5s ease-in-out;
        transition:all 0.5s ease-in-out;
position:relative;
border:3px solid #000000;
float:left;
clear:both;
margin:10px 0;
}
.main-button-text{
padding-top:15px;
padding-right:25px;
display:block;
font-size:18px;
white-space:nowrap;
text-shadow:0px 1px 1px rgba(255,255,255,0.3);
color:#ffffff;
/*transition*/
-webkit-transition:all 0.2s linear;
   -moz-transition:all 0.2s linear;
     -o-transition:all 0.2s linear;
        transition:all 0.2s linear;
}
.main-button-hidden-text{
position:absolute;
height:100%;
top:0px;
padding-top:13px;
right:52px;
width:0px;
background:#63707e;
text-shadow:0px -1px 1px #363f49;
color:#fff;
font-size:18px;
white-space:nowrap;
text-transform:uppercase;
text-align:left;
text-indent:10px;
overflow:hidden;
line-height:38px;
/*box-shadow*/
-webkit-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
   -moz-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
        box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
/*transition*/lzmxjh1fn7nq9qicuywygix2ccgclc80
-webkit-transition:width 0.3s linear;
   -moz-transition:width 0.3s linear;
     -o-transition:width 0.3s linear;
        transition:width 0.3s linear;
}
.divider{
position:absolute;
right:0px;
top:0px;
height:100%;
width:50px;
border-left:3px solid black;
background:url(arrow-right.png) no-repeat 50% 55%;
/*transition*/
-webkit-transition:all 0.5s ease-in-out;
   -moz-transition:all 0.5s ease-in-out;
     -o-transition:all 0.5s ease-in-out;
        transition:all 0.5s ease-in-out;
}
.divider span{
width:50px;
height:60px;
opacity:0.5;
position:absolute;
left:50%;
top:50%;
/*transition*/
-webkit-transition:all 0.5s ease-in-out;
   -moz-transition:all 0.5s ease-in-out;
     -o-transition:all 0.5s ease-in-out;
        transition:all 0.5s ease-in-out;
margin:-20px 0px 0px -20px;
}
.main-button:hover{
/*border-radius*/
-webkit-border-radius:30px 0px 30px 0px;
   -moz-border-radius:30px 0px 30px 0px;
        border-radius:30px 0px 30px 0px;
padding-right:150px;
border:3px solid #000000;
background:#023F14;
}
.main-button:hover .main-button-text{
text-shadow:0px 2px 2px #5d81ab;
color:#fff;
/*transform*/
-webkit-transform:rotate(-360deg);
   -moz-transform:rotate(-360deg);
    -ms-transform:rotate(-360deg);
     -o-transform:rotate(-360deg);
        transform:rotate(-360deg);
}
.main-button:hover .main-button-hidden-text{
width:100px;
/*box-shadow*/
-webkit-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 3px 4px 4px rgba(0,0,0,0.5) inset;
   -moz-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 3px 4px 4px rgba(0,0,0,0.5) inset;
        box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 3px 4px 4px rgba(0,0,0,0.5) inset;
}
.main-button:hover .divider{
/*transform*/
-webkit-transform:rotate(540deg);
   -moz-transform:rotate(540deg);
    -ms-transform:rotate(540deg);
     -o-transform:rotate(540deg);
        transform:rotate(540deg);
border-left:0px;
}
.main-button:hover .divider span{
opacity:1;
/*transform*/
-webkit-transform:rotate(540deg);
   -moz-transform:rotate(540deg);
    -ms-transform:rotate(540deg);
     -o-transform:rotate(540deg);
        transform:rotate(540deg);
}
/*Second button goes here */

.main-button-2{
background:#544FAF;
padding-right:50px;
padding-left:50px;
display:inline-block;
height:60px;
overflow:hidden;
/*transition*/
-webkit-transition:all 0.5s ease-in-out;
   -moz-transition:all 0.5s ease-in-out;
     -o-transition:all 0.5s ease-in-out;
        transition:all 0.5s ease-in-out;
position:relative;
border:3px solid #000000;
float:left;
clear:both;
margin:10px 0;
}
.main-button-2:hover{
/*border-radius*/
-webkit-border-radius:30px 0px 30px 0px;
   -moz-border-radius:30px 0px 30px 0px;
        border-radius:30px 0px 30px 0px;
padding-right:150px;
border:3px solid #000000;
background:#170FAF;
}
.main-button-2:hover .main-button-text{
text-shadow:0px 2px 2px #5d81ab;
color:#fff;
/*transform*/
-webkit-transform:rotate(-360deg);
   -moz-transform:rotate(-360deg);
    -ms-transform:rotate(-360deg);
     -o-transform:rotate(-360deg);
        transform:rotate(-360deg);
}
.main-button-2:hover .main-button-hidden-text{
width:100px;
/*box-shadow*/
-webkit-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 3px 4px 4px rgba(0,0,0,0.5) inset;
   -moz-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 3px 4px 4px rgba(0,0,0,0.5) inset;
        box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 3px 4px 4px rgba(0,0,0,0.5) inset;
}
.main-button-2:hover .divider{
/*transform*/
-webkit-transform:rotate(540deg);
   -moz-transform:rotate(540deg);
    -ms-transform:rotate(540deg);
     -o-transform:rotate(540deg);
        transform:rotate(540deg);
border-left:0px;
}
.main-button-2:hover .divider span{
opacity:1;
/*transform*/
-webkit-transform:rotate(540deg);
   -moz-transform:rotate(540deg);
    -ms-transform:rotate(540deg);
     -o-transform:rotate(540deg);
        transform:rotate(540deg);
}
/*Third Button Goes here*/

.main-button-3{
background:#CE5050;
padding-right:50px;
padding-left:50px;
display:inline-block;
height:60px;
overflow:hidden;
/*transition*/
-webkit-transition:all 0.5s ease-in-out;
   -moz-transition:all 0.5s ease-in-out;
     -o-transition:all 0.5s ease-in-out;
        transition:all 0.5s ease-in-out;
position:relative;
border:3px solid #000000;
float:left;
clear:both;
margin:10px 0;
}
.main-button-3:hover{
/*border-radius*/
-webkit-border-radius:30px 0px 30px 0px;
   -moz-border-radius:30px 0px 30px 0px;
        border-radius:30px 0px 30px 0px;
padding-right:150px;
border:3px solid #000000;
background:#D31E1B;
}
.main-button-3:hover .main-button-text{
text-shadow:0px 2px 2px #5d81ab;
color:#fff;
/*transform*/
-webkit-transform:rotate(-360deg);
   -moz-transform:rotate(-360deg);
    -ms-transform:rotate(-360deg);
     -o-transform:rotate(-360deg);
        transform:rotate(-360deg);
}
.main-button-3:hover .main-button-hidden-text{
width:100px;
/*box-shadow*/
-webkit-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 3px 4px 4px rgba(0,0,0,0.5) inset;
   -moz-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 3px 4px 4px rgba(0,0,0,0.5) inset;
        box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 3px 4px 4px rgba(0,0,0,0.5) inset;
}
.main-button-3:hover .divider{
/*transform*/
-webkit-transform:rotate(540deg);
   -moz-transform:rotate(540deg);
    -ms-transform:rotate(540deg);
     -o-transform:rotate(540deg);
        transform:rotate(540deg);
border-left:0px;
}
.main-button-3:hover .divider span{
opacity:1;
/*transform*/
-webkit-transform:rotate(540deg);
   -moz-transform:rotate(540deg);
    -ms-transform:rotate(540deg);
     -o-transform:rotate(540deg);
        transform:rotate(540deg);
}
/*Fourth button goes here*/
.main-button-4{
background:#D376BA;
padding-right:50px;
padding-left:50px;
display:inline-block;
height:60px;
overflow:hidden;
/*transition*/
-webkit-transition:all 0.5s ease-in-out;
   -moz-transition:all 0.5s ease-in-out;
     -o-transition:all 0.5s ease-in-out;
        transition:all 0.5s ease-in-out;
position:relative;
border:3px solid #000000;
float:left;
clear:both;
margin:10px 0;
}
.main-button-4:hover{
/*border-radius*/
-webkit-border-radius:30px 0px 30px 0px;
   -moz-border-radius:30px 0px 30px 0px;
        border-radius:30px 0px 30px 0px;
padding-right:150px;
border:3px solid #000000;
background:#D60A9F;
}
.main-button-4:hover .main-button-text{
text-shadow:0px 2px 2px #5d81ab;
color:#fff;
/*transform*/
-webkit-transform:rotate(-360deg);
   -moz-transform:rotate(-360deg);
    -ms-transform:rotate(-360deg);
     -o-transform:rotate(-360deg);
        transform:rotate(-360deg);
}
.main-button-4:hover .main-button-hidden-text{
width:100px;
/*box-shadow*/
-webkit-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 3px 4px 4px rgba(0,0,0,0.5) inset;
   -moz-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 3px 4px 4px rgba(0,0,0,0.5) inset;
        box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 3px 4px 4px rgba(0,0,0,0.5) inset;
}
.main-button-4:hover .divider{
/*transform*/
-webkit-transform:rotate(540deg);
   -moz-transform:rotate(540deg);
    -ms-transform:rotate(540deg);
     -o-transform:rotate(540deg);
        transform:rotate(540deg);
border-left:0px;
}
.main-button-4:hover .divider span{
opacity:1;
/*transform*/
-webkit-transform:rotate(540deg);
   -moz-transform:rotate(540deg);
    -ms-transform:rotate(540deg);
     -o-transform:rotate(540deg);
        transform:rotate(540deg);
}
/*Fifth button goes here */

.main-button-5{
background:#496066;
padding-right:50px;
padding-left:50px;
display:inline-block;
height:60px;
overflow:hidden;
/*transition*/
-webkit-transition:all 0.5s ease-in-out;
   -moz-transition:all 0.5s ease-in-out;
     -o-transition:all 0.5s ease-in-out;
        transition:all 0.5s ease-in-out;
position:relative;
border:3px solid #000000;
float:left;
clear:both;
margin:10px 0;
}
.main-button-5:hover{
/*border-radius*/
-webkit-border-radius:30px 0px 30px 0px;
   -moz-border-radius:30px 0px 30px 0px;
        border-radius:30px 0px 30px 0px;
padding-right:150px;
border:3px solid #000000;
background:#000000;
}
.main-button-5:hover .main-button-text{
text-shadow:0px 2px 2px #5d81ab;
color:#fff;
/*transform*/
-webkit-transform:rotate(-360deg);
   -moz-transform:rotate(-360deg);
    -ms-transform:rotate(-360deg);
     -o-transform:rotate(-360deg);
        transform:rotate(-360deg);
}
.main-button-5:hover .main-button-hidden-text{
width:100px;
/*box-shadow*/
-webkit-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 3px 4px 4px rgba(0,0,0,0.5) inset;
   -moz-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 3px 4px 4px rgba(0,0,0,0.5) inset;
        box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 3px 4px 4px rgba(0,0,0,0.5) inset;
}
.main-button-5:hover .divider{
/*transform*/
-webkit-transform:rotate(540deg);
   -moz-transform:rotate(540deg);
    -ms-transform:rotate(540deg);
     -o-transform:rotate(540deg);
        transform:rotate(540deg);
border-left:0px;
}
.main-button-5:hover .divider span{
opacity:1;
/*transform*/
-webkit-transform:rotate(540deg);
   -moz-transform:rotate(540deg);
    -ms-transform:rotate(540deg);
     -o-transform:rotate(540deg);
        transform:rotate(540deg);
}

</code></pre>
Save that css file with name hidden-text.css , put both html and css files in a same folder , enjoy you are ready to use this code to your website or anywhere else (Please note that in the code you find two .png images , those are simple  png images created with microsoft paint , one is for displaying the arrow on the right side of the button and the second one is for displaying dark background image. You can use your own images. )</div>

Create awesome capsule buttons with pure CSS3

Hey ! there guys welcome to codinggiri once again. Today we are going to code a really beautiful CSS3 button with a really cool animat...

Introduction to Objects and Types in Python

Unknown 0 Python Thursday, March 13, 2014

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-k7tUbtbQOcE/UyGkC9wnxFI/AAAAAAAAAH0/-kt5zGag-Y8/s1600/all_objects.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://2.bp.blogspot.com/-k7tUbtbQOcE/UyGkC9wnxFI/AAAAAAAAAH0/-kt5zGag-Y8/s1600/all_objects.png" width="279" /></a></div>
<br />
Welcome Guys to this new Post. Today we will learn about Data/Object Types in <a class="zem_slink" href="http://www.python.org/" rel="homepage" target="_blank" title="Python (programming language)">Python Programming Language</a>.<br />
<b><u>Rule You Must Follow:</u></b> <br />
<br />
<blockquote class="tr_bq">
Everything is an Object.</blockquote>
<br />
From <a href="http://docs.python.org/3/" target="_blank">Python Docs</a> , The Python Data-Model -Reference has a very clear and good definition about Objects in Python<br />
<br />
<blockquote class="tr_bq">
Objects are Python's abstraction fro data. All data in a Python Program is represented by object or by relation between objects.</blockquote>
Every Object had an identity, a type and a value.In Short Everything in Python is an Object.like <u>[42,ved,India,White house evrything is an object] </u><br />
<br />
<h2 style="text-align: left;">
TYPES</h2>
<blockquote class="tr_bq">
<div style="text-align: left;">
An object's type determines the operations that the object support and also defines the passable value for object of that type</div>
</blockquote>
 that means every object in Python has a type . You can find/discover the type(built-in-function)with the flowing method just write that code and save that with desirable name with a .py extension , run it and see the result. For better understanding see the screenshot in the last of this post.<br />
<pre class="prettyprint">a = "My name is ved"
print (type(a))
b = 42
print (type(b))
c  = 23.5
print(type(c))

</pre>
<a href="http://3.bp.blogspot.com/-7b-bZJkh4n0/UyGsBpWv-qI/AAAAAAAAAIE/nkxtN0xtZ68/s1600/Snap+2014-03-13+at+18.17.22.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="339" src="http://3.bp.blogspot.com/-7b-bZJkh4n0/UyGsBpWv-qI/AAAAAAAAAIE/nkxtN0xtZ68/s1600/Snap+2014-03-13+at+18.17.22.png" width="640" /></a><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
If you are facing any problem while learning python please email me or comment below. I will help you out ASAP.  In next post we will find out more on object/data types. see you , Happy Codding :)<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
</div>

Introduction to Objects and Types in Python

Welcome Guys to this new Post. Today we will learn about Data/Object Types in Python Programming Language . Rule You Must Follow: E...

Coding and running your first python code

Unknown 0 all, Python Wednesday, March 12, 2014

<div dir="ltr" style="text-align: left;" trbidi="on">
Hello again guys !<br />
in this post we are going to understand the the <a class="zem_slink" href="http://en.wikipedia.org/wiki/IDLE_%28Python%29" rel="wikipedia" target="_blank" title="IDLE (Python)">IDLE</a> and it's feature.<br />
According to Mark Lutz<br />
"IDLE is a desktop <a class="zem_slink" href="http://en.wikipedia.org/wiki/Graphical_user_interface" rel="wikipedia" target="_blank" title="Graphical user interface">GUI</a> that lets you edit, run, browse, and debug <a class="zem_slink" href="http://en.wikipedia.org/wiki/Python_%28programming_language%29" rel="wikipedia" target="_blank" title="Python (programming language)">Python</a><br />
programs, all from a single interface. It runs portably on most Python platforms, including<br />
Microsoft Windows, X Windows (for Linux, <a class="zem_slink" href="http://en.wikipedia.org/wiki/Unix" rel="wikipedia" target="_blank" title="Unix">Unix</a>, and Unix-like platforms),<br />
and the Mac OS (both Classic and OS X). For many, IDLE represents an easy-to-use<br />
alternative to typing command lines, a less problem-prone alternative to clicking on<br />
icons, and a great way for newcomers to get started editing and running code. You’ll<br />
sacrifice some control in the bargain, but this typically becomes important later in your<br />
Python career."<br />
<br />
Let me tell you some good features of IDLE.<br />
You can type Python code and see the output/result of that code immediately in to the Python Shell, IDLE comes with an internal code editor which is very useful , because it provides the developer , code suggestions, syntax highlighting ,indent support and many other useful facilities.  <br />
for those who don't know that what is python shell should take a look on the image below<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-S1409q_QSpA/UyCaAWBNyeI/AAAAAAAAAHM/fATldSrT7pA/s1600/Snap+2014-03-12+at+22.56.11.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="188" src="http://4.bp.blogspot.com/-S1409q_QSpA/UyCaAWBNyeI/AAAAAAAAAHM/fATldSrT7pA/s1600/Snap+2014-03-12+at+22.56.11.png" width="640" /></a></div>
  <br />
It's nothing but a command line interpreter of Python (Please don't get confused.follow me and every thing will be all right :) )<br />
<div class="zemanta-pixie" style="height: 15px; margin-top: 10px;">
So open the IDLE and type <br />
<span style="background-color: black;"><span style="color: orange;">print("Hello ! Python")</span></span></div>
<div class="zemanta-pixie" style="height: 15px; margin-top: 10px;">
<br /></div>
<div class="zemanta-pixie" style="height: 15px; margin-top: 10px;">
and press enter </div>
<div class="zemanta-pixie" style="height: 15px; margin-top: 10px;">
follow the screenshot below</div>
<div class="zemanta-pixie" style="height: 15px; margin-top: 10px;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-3IifKHrlrFI/UyCWc5unLaI/AAAAAAAAAHA/GpqLOixM848/s1600/Snap+2014-03-12+at+22.45.18.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="292" src="http://3.bp.blogspot.com/-3IifKHrlrFI/UyCWc5unLaI/AAAAAAAAAHA/GpqLOixM848/s1600/Snap+2014-03-12+at+22.45.18.png" width="640" /></a></div>
<div class="zemanta-pixie" style="height: 15px; margin-top: 10px;">
So now you know how to write and run a python program from the interpreter (where the Python commands can be typed and executed.) now let's learn how to create python program,saving the program with a .py extension and how to run it.</div>
<div class="zemanta-pixie" style="height: 15px; margin-top: 10px;">
</div>
<div class="zemanta-pixie" style="height: 15px; margin-top: 10px;">
</div>
<br />
<div class="zemanta-pixie" style="height: 15px; margin-top: 10px;">
well
 it's quite simple. On IDLE go to FILE >> New File or Simply Press
 Ctrl + N and it will open a new window of IDLE code editor<br />
now write a simple line of python program like you did on interpreter  ,
 yes the same hello python program after then save it with desirable 
name with a .py extension like hello.py or new.py after that hit F5 and 
the result will be there at the python shell. follow the screen shot 
below </div>
<div class="zemanta-pixie" style="height: 15px; margin-top: 10px;">
<br /></div>
<br />
<br />
<br />
<br />
<div class="zemanta-pixie" style="height: 15px; margin-top: 10px;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-NUaIdRSxvWs/UyCeoooVTTI/AAAAAAAAAHc/DO61pM0RENI/s1600/Snap+2014-03-12+at+23.21.12.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-NUaIdRSxvWs/UyCeoooVTTI/AAAAAAAAAHc/DO61pM0RENI/s1600/Snap+2014-03-12+at+23.21.12.png" /></a></div>
<div class="zemanta-pixie" style="height: 15px; margin-top: 10px;">
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-fzKNvjjoOaw/UyChE3cRaMI/AAAAAAAAAHo/UuoEHIgpnvQ/s1600/5716748401_56995cd14a.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-fzKNvjjoOaw/UyChE3cRaMI/AAAAAAAAAHo/UuoEHIgpnvQ/s1600/5716748401_56995cd14a.jpg" /></a></div>
<div class="zemanta-pixie" style="height: 15px; margin-top: 10px;">
All
 right now you know how to write and run Python code with both methods .
 in next post we will encounter the data types of python and please have
 a look at the comic (left) and don't feel like that comic guy :p see you
 in next post  Happy Coding :)</div>
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
</div>
</div>

Coding and running your first python code

Hello again guys ! in this post we are going to understand the the IDLE and it's feature. According to Mark Lutz "IDLE is a de...

Lets Install Python

Unknown 0 all, Python Tuesday, March 11, 2014

<div dir="ltr" style="text-align: left;" trbidi="on">
Linux an Mac are preloaded with python. On this blog post i am going to write method for windows only and please let me know if you are facing any problem in installing.<br />
<br />
so first thing first lets download the python installer from <a href="http://python.org/downloads/" target="_blank">Python's Website</a>. or download with this <a href="http://www.python.org/ftp/python/3.3.5/python-3.3.5.msi" target="_blank">direct link</a> (we will learn python with Python 3 not with Python 2 so please download the installer of Python 3)<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://1.bp.blogspot.com/-A9c8jp7kMx4/Ux71equH7XI/AAAAAAAAAGg/4G44N4TlW60/s1600/Snap+2014-03-11+at+17.05.45.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="468" src="http://1.bp.blogspot.com/-A9c8jp7kMx4/Ux71equH7XI/AAAAAAAAAGg/4G44N4TlW60/s1600/Snap+2014-03-11+at+17.05.45.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Python Download Page</td><td class="tr-caption" style="text-align: center;">\</td></tr>
</tbody></table>
After downloading the installer , install it and after that you can find this three option while typing "python" in start menu of your windows.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-ROnbU7tLh_w/Ux72sd196eI/AAAAAAAAAGs/_tCK9GG-ODo/s1600/Snap+2014-03-11+at+17.11.35.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="400" src="http://1.bp.blogspot.com/-ROnbU7tLh_w/Ux72sd196eI/AAAAAAAAAGs/_tCK9GG-ODo/s1600/Snap+2014-03-11+at+17.11.35.png" width="293" /></a></div>
Congratulations , Python is successful installed into your windows we can also add path variables for python but we will encounter it later.<br />
<br />
<u><b>Next step :-  </b></u>click on IDLE(Python GUI) to start coding with python.<br />
<br />
in Next post we will take a look at the IDLE and understand it's functions.</div>

Lets Install Python

Linux an Mac are preloaded with python. On this blog post i am going to write method for windows only and please let me know if you are fac...

Inroduction to Python

Unknown 0 all, Python Tuesday, March 11, 2014

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: left;">
</div>
<div style="text-align: right;">
</div>
<div style="text-align: right;">
</div>
<div style="text-align: right;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-Fe7eoPfnbNk/Ux7sePa49VI/AAAAAAAAAGQ/ouEmIKt1r04/s1600/python-logo-master-v3-TM.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="108" src="http://2.bp.blogspot.com/-Fe7eoPfnbNk/Ux7sePa49VI/AAAAAAAAAGQ/ouEmIKt1r04/s1600/python-logo-master-v3-TM.png" width="320" /></a></div>
<br />
<br />
Python is a great programming language to choose if you are a beginner.<br />
 Let me tell you some point , why you should choose python as your first programming language (as a learner).<br />
<br />
<br />
<br />
<ol style="text-align: left;">
<li>Learning Pythnon is easy and fun</li>
<li>No Boilerplate like #include or using  or import just start coding</li>
<li>Less line of code , you can write a simple hello world program in just one line but other languages take 10-15 line to write the same hello world program.( Fewer lines of code=fewer bugs. )</li>
<li>It's Free </li>
<li>Free doesn't mean no or less support. There are countless communities and forum on internet where you can get help.</li>
<li>Tons of modules to jump start a new project.</li>
<li>Python codes are 1001 % more readable than any other programming languages .</li>
<li>Python is flexible no matter which OS you are using Linux , windows , mac , free BSD or any other Python codes supper flexible the same code will run on any OS with no or  little change.</li>
<li>Good quality documentation is there.</li>
<li>It's easy to start up and light weight, but can add a ton of value.</li>
</ol>
</div>

Inroduction to Python

Python is a great programming language to choose if you are a beginner. Let me tell you some point , why you should choose py...

Understanding the paragraph tag

Unknown 0 Monday, March 10, 2014

<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: left;">
The <p> tag</h2>
To show a individual paragraph on your page you have to use the <p> tag<br />
<p> = = paragraph tag<br />
<br />
take a look at the code below<br />
notice what is written between <p> and </p> . save and run the code to see the result.<br />
<br />
<pre class="prettyprint lang-html"><!doctype html>
<html>
 <head>
  <title>
  My first Web page
  </title>
  <body>
   <p>
    This is a paragraph in HTML5
   </p>
  </body>
 </head>
</html>
</pre>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-_WmIiQ2W4tU/Ut4QgD3AcNI/AAAAAAAAABo/ylrGW3D2yb4/s1600/Snap+2014-01-21+at+11.44.05.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-_WmIiQ2W4tU/Ut4QgD3AcNI/AAAAAAAAABo/ylrGW3D2yb4/s1600/Snap+2014-01-21+at+11.44.05.png" /></a></div>
<br />
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
</div>

Understanding the paragraph tag

The <p> tag To show a individual paragraph on your page you have to use the <p> tag <p> = = paragraph tag take a loo...

Understanding the core markup - Writing Codes

Unknown 0 all, HTML5, Python Monday, March 10, 2014

<div dir="ltr" style="text-align: left;" trbidi="on">
<div>
Hello all ! In this post we will understand the structure module of webpages.Please note that while creating web pages (or should i say beautifull web pages ) developers follow the three main modules<br />
<br />
<ol style="text-align: left;">
<li><span style="color: red;">Structure  [HTML]</span></li>
<span style="color: red;">
</span>
<li><span style="color: red;">Styling  [CSS]</span></li>
<span style="color: red;">
</span>
<li><span style="color: red;">Behaviour [JavaScript]</span></li>
</ol>
I know it's kind of confusing if it is new to it but don't get confused [at least have a little faith in me man ] </div>
we will start from the Structure Module the HTML and i am not going to write that what HTML can do and all blah blah blah stuff lets just jump start to coding.<br />
<br />
open your notepad++ and choose from language >> H >> HTML.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-hs5Ct768Wm4/Ut3vaqcj7WI/AAAAAAAAAAw/25QrqrGR5Vc/s1600/Snap+2014-01-21+at+09.23.32.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="http://2.bp.blogspot.com/-hs5Ct768Wm4/Ut3vaqcj7WI/AAAAAAAAAAw/25QrqrGR5Vc/s1600/Snap+2014-01-21+at+09.23.32.png" width="400" /></a></div>
 and start typing your code<br />
<br />
<pre class="prettyprint lang-html"><!doctype html>

<html>
 <head>
  <title>
  This is my first webpage
  </title>
 </head>
 <body>
  <p>
   Hello Coder Baba
  </p>
 </body>
</html>
</pre>
<br />
save that file as .html and open that file in a browser like Mozilla Firefox or Google chrome.<br />
open it and  you will see something like that.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-NT_xOC9Fb4I/Ut_xK--qLtI/AAAAAAAAACQ/ZIzPb89MRfE/s1600/Snap+2014-01-22+at+21.55.52.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-NT_xOC9Fb4I/Ut_xK--qLtI/AAAAAAAAACQ/ZIzPb89MRfE/s1600/Snap+2014-01-22+at+21.55.52.png" /></a></div>
Cheers ! You've created your very own web page with HTML.<br />
now let us understand what does that code means. Since HTML is the language of tags and in HTML5 There are more than 400 tags. keep that in mind that<br />
<br />
<span style="color: red;">This is the opening tag ----- <tag></span><br />
<span style="color: red;">and this is the closing tag ------ </tag></span><br />
<br />
Did you get the difference ? yes to close a tag just simply type a '/'.<br />
<br />
and yeas there are some tag without closing, like <img>,<br><hr>. You don't have to put a closing tag for that.<br />
<br />
And now let us understand a very basic and Important RULE while writing HTML.<br />
The RULE is "<span style="color: red;">Close the current tag before opening a new tag</span> ".<br />
For example you've open a tag <head> and after <head> you want to start <title> tag but remember before opening <title> you have to close the <head> with this </head>.<br />
<br />
You must follow that rule because as you keep learning the HTML you'll write more complex code as shown in that picture below and you'll get stuck many time if you forget to close the tags properly. <br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-4c1Y1LdQeOI/Ut_wg_MN3KI/AAAAAAAAACI/8lYNaA5-hPI/s1600/Snap+2014-01-22+at+21.53.06.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-4c1Y1LdQeOI/Ut_wg_MN3KI/AAAAAAAAACI/8lYNaA5-hPI/s1600/Snap+2014-01-22+at+21.53.06.png" /></a></div>
<br />
<br />
In Next Post we will understand the tags deeply Thank you for reading Keep coding :)</div>

Understanding the core markup - Writing Codes

Hello all ! In this post we will understand the structure module of webpages.Please note that while creating web pages (or should i say be...

Understanding the core markup - The DOCTYPE Element

Unknown 0 all, HTML5, Python Monday, March 10, 2014

<div dir="ltr" style="text-align: left;" trbidi="on">
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://1.bp.blogspot.com/-ElwcKp8EQ1s/Ux3uPxEKzOI/AAAAAAAAAD8/Imrzr-mNHwA/s1600/doctype.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="http://1.bp.blogspot.com/-ElwcKp8EQ1s/Ux3uPxEKzOI/AAAAAAAAAD8/Imrzr-mNHwA/s1600/doctype.jpg" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">The <!doctype html> </td></tr>
</tbody></table>
<br />
<h2 style="text-align: left;">
The !DOCTYPE Elemnt</h2>
<div style="text-align: left;">
Every HTML document starts with a doctype specification. The doctype element tells the browser that which version of html is used in that specific HTML document. This element does not have the closing tag .<br />
<blockquote class="tr_bq">
<div style="text-align: left;">
Let me clear one very special thing that HTML is the language of TAGS 
and in html5 there are more than 400 tags are there. we will encounter 
them in next blog post</div>
</blockquote>
To declare  the docctype you have to write this :-<br />
<pre class="prettyprint lang-html"><!doctype html></pre>
<br />
and you are good to go<br />
<br /></div>
<h2 style="text-align: left;">
</h2>
</div>

Understanding the core markup - The DOCTYPE Element

The <!doctype html> The !DOCTYPE Elemnt Every HTML document starts with a doctype specification. The doctype element tells th...

Choosing a IDE

Unknown 0 all, HTML5, Python Monday, March 10, 2014

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
</div>
<div>
<a href="http://4.bp.blogspot.com/-71NqE6gMWyY/Ux3yhoP7xvI/AAAAAAAAAEQ/6OydxGPfxRs/s1600/aptana_512x512x32.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="http://4.bp.blogspot.com/-71NqE6gMWyY/Ux3yhoP7xvI/AAAAAAAAAEQ/6OydxGPfxRs/s1600/aptana_512x512x32.png" width="200" /></a><br />
<h2 style="text-align: left;">
The Dilemma of choosing IDE  </h2>
Choosing a right IDE (Integrated Development Environment) for you could be a tough decision because of Internet there are many IDE who claims that they are best and blah blah blah....<br />
don't be confused i will tell you which IDE is good for you to code HTML since you are a beginner <br />
<br />
<br />
<br />
<br />
<h2 style="text-align: left;">
The best IDEs (According to me) </h2>
<ol style="text-align: left;">
<li>Sublime Text  ( <a href="http://www.sublimetext.com/3" target="_blank">Download Here</a> )</li>
<li>Notepad++ ( <a href="http://notepad-plus-plus.org/" target="_blank">Downlaod Here</a> )</li>
<li>Aptana Studio 3 ( <a href="http://www.aptana.com/" target="_blank">Downlaod Here</a> )</li>
</ol>
</div>
You are free to use any Other IDE but i am going to use notepad++.<br />
If there is any problem please comment below and i will sort it out ASAP<br />
<div>
<div style="text-align: left;">
</div>
<br /></div>
</div>

Choosing a IDE

The Dilemma of choosing IDE Choosing a right IDE (Integrated Development Environment) for you could be a tough decision because of I...

All hail HTML5

Unknown 0 all, HTML5, Python Monday, March 10, 2014

<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: left;">
Welcome to the great new HTML5</h2>
<div style="text-align: left;">
html5 is the latest version of HTML. Yes the same almighty HTML. No website can be coded without HTML weather it's a dynamic website , static website or custom web application.</div>
<div style="text-align: left;">
So let us back to the point ,why every web developer/designer is going with HTML5 ?</div>
<div style="text-align: left;">
The are countless reasons behind that.   HTML5 is opening new dimensions to web developers by giving them new and powerful weapons like AUDIO,VIDEO, CANVAS , DRAG & DROP and some other useful JavaScript APIs.</div>
<div style="text-align: left;">
so lets explore the new features of  HTML5.</div>
<div style="text-align: left;">
<br /></div>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="http://www.w3.org/html/logo/downloads/HTML5_1Color_Black.png" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="320" src="http://www.w3.org/html/logo/downloads/HTML5_1Color_Black.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">HTML5 LOGO, normally it's of color orange but hers the logo is in black</td></tr>
</tbody></table>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<h2 style="text-align: left;">
What's new in HTML5</h2>
<div style="text-align: left;">
Here's the list below:</div>
<ul style="text-align: left;">
<li>New elements</li>
<li>New attributes</li>
<li>Link relations</li>
<li>Microdata</li>
<li>ARIA(Accessible Rich Internet Applications)</li>
<li>Wen forms 2.0</li>
<li>Multimedia</li>
<li>2D and 3D drawing support</li>
<li>offline web applications</li>
<li>Client side storage</li>
<li>Web Sockets and web Workers </li>
<li>Drag and Drop API</li>
<li>GeoLocationn</li>
<li>Modernizr</li>
</ul>
and more............................................................................<br />
<br />
so i hope you can understand now that how powerful is html5.In next blog posts we will learn the core markup till then bye :)<br />
<br />
</div>

All hail HTML5

Welcome to the great new HTML5 html5 is the latest version of HTML. Yes the same almighty HTML. No website can be coded without HTML wea...

codinggiri

JavaScript Exercise Session 1st

JavaScript Quick and Dirty Tutorial-Part - 3 ,(Working with Variables and Data Types in JavaScript)

JavaScript Quick and Dirty Tutorial-Part - 2 ,(Writing JavaScript Code and Indroduction to JS console in Chrome & Firefox)

JavaScript Quick and Dirty Tutorial, Part - 1

Create awesome capsule buttons with pure CSS3

Introduction to Objects and Types in Python

Coding and running your first python code

Lets Install Python

Inroduction to Python

Understanding the paragraph tag

Understanding the core markup - Writing Codes

Understanding the core markup - The DOCTYPE Element

Choosing a IDE

All hail HTML5

Popular Posts

Labels

Blog Archive