Like Us Like Us Facebook Subscribe Subscribe us YouTube Whatsapp Share us Whatsapp Query Send your queries

Web Developer extension and the choice of Best Web Browser

Web Developer extension and the choice of Best Web Browser

If you are a web developer then the question is quite common which is the best web browser for web development . In this tech arena every browser want to take the number one tag. In this blog I am going to share my favorite browser and why it became number one .
Mozilla Firefox is my favorite, I accept chrome has taken the market share for being light and fast, internet explorer 10 is also doing well but still I die for firefox. Right now I use Firefox 18 , in speed its par with chrome and IE 10 in some cases faster, but right now we use modern computer that has atleast 2GB of RAM and dual core CPU so you can’t see the speed difference only benchmarks can tell the difference. Firefox uses more memory around 400-700MB but its not a problem. Firefox offers net and clean interface, always welcome new technologies, devoted towards open source and also stable and secure. Its extension arena has everything you need and it makes you special , chrome also supports extension and has decent store where you can download and install extension with no restart feature but firefox interface is awesome as firefox is feature rich compared to chrome. IE is by greedy microsoft the company is not listening to its old customer as the support of IE10 is limited to Windows 8 still now does not supports multi platform so it was omitted from my list.

Firefox and the extension we die for :

If we are a web developer or SEO Expert then Firefox makes you job easy, I am going to share a partial list of my favorite extension.

1. ADBLOCK PLUS

Web Designer has to surf a lot to get new ideas or inspiration but the annoying ads and pop ups make the job hard, adblock plus not only block all these but gives you interface to control it.

2. Colorzilla

If you are a web designer or UI designer then you can’t stop yourselves playing with colors. This is not a color picker tool but has eyedropper and other cool option.

3. Firebug

HTML , HTML5 , CSS , javascript wonder which kind of scripting is using this firebug is the only solution, it give not only to view source of website but with advance option. This is Web Designer no. one app.

4. Webrankstat

This is a SEO tool provides alexa rank, google rank,page index,backlinks and other information while surfing.list is going to updated soon.

HTML FORM tutorial with CSS based Example

HTML FORM tutorial with CSS based Example

FORMS are used to pass data to a server and contain input elements like
text, check box, radio, button, submit, reset, password.

A form is incomplete with out input box . Data sent to server through forms using input elements  and executed on the server.Lets have a example of a form

<form action=”name.php” method=”post”>
<input type=”text” name=”name” />
<input type=”submit” name=”submit” value=”Go”/>
</form>

Output

Explanation:
action- pointed to page where programming codes will be there.
type- we have to define type of input box whether it is text, password,submit or so on..
method- we have to define which method we are using GET or POST , remember POST is secure compare to GET.

Lets have Complete example –
In this example used PHP as Programming language, CSS for making the form look good and html5.

Complete Script –

 <!DOCTYPE html>

<html lang=”en”>
<head>
<title>Form Tutorial</title>
<meta charset=”utf-8″ />
<style type=”text/css”>
.input{
background:#fff;
border: 1px solid #999;
box-shadow:inset 0 0 2px #000000;
color: #222;
}
.input:hover{
background:#f6f6f6;
border: 1px solid #999;
color: #222;
}
</style>
</head><body>
<?php
if(isset($_POST[‘submit’)){
$name=$_POST[‘name’];
echo “Hello “. $name. ” its Working naa”;
}
?>
<form action=”” method=”post”>
<input type=”text” name=”name”  class=”input”/>
<input type=”submit” name=”submit” value=”Go” class=”input”/>
</form>
</body>
</html>

If you have any question then please comment .

Simple Link Hover Effect using CSS Tutorial

Simple Link Hover Effect using CSS Tutorial

Are you bored with custom link colors and want to give a  new look to your links with new colors and effect then you come to right place, in this tutorial I am going to share how to make a link hover effect.
Simple Link Hover Effect using CSSStructure :
you have to place this simple Code in you HTML <head> tag. just like

<head>
<style type=”text/css”>
a:link{color: #370;}
a:visited {color:#369;}
a:hover   {color:#f90;}
a:active  {color:#444;}</style>
</head>



A complete Example :

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Link Hover Effect by HTML5Planet</title>
<meta charset=”utf-8″ />
<style type=”text/css”>
a:link{color: #370;font-family:arial;text-decoration:none}
a:visited {color:#369;}
a:hover   {color:#f90;font-family:Times New Roman;font-weight:bold;text-decoration:underline}
a:active  {color:#444;}
</style></head>
<body>
<a href=”https://www.codentricks.com” title=””>Codentricks</a>
|<a href=”http://www.openplus.in/” title=””>Openplus</a>
</body>
</html>

Creating Stunning Pure CSS Navigation Menu with Simple Coding

Creating Stunning Pure CSS Navigation Menu with Simple Coding

I am not going to teach you each step as you see the code , you will be able to understand it with out any problem. If you have any problem then please comment I will help you.

Screenshot:

 Pure CSS Navigation Menu with Simple Coding

Coding:

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Sanjay’ HTML5 World</title>
<meta charset=”utf-8″ />
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
background:#FFD700;
border: 1px solid #f80;
padding:5px 5px 5px 15px;
}
li
{
display:inline;
}
li a:link{
color:#222;
text-decoration:none;
}
li a:active{
color:#222;
text-decoration:none;
}
li a:visited{
color:#222;
text-decoration:none;
}
li a:hover{
color:#f30;
text-decoration:underline;
}
</style>
</head>
<body>
<ul>
<li><a href=”home.htm”>Home</a></li>
<li><a href=”service.htm”>Services</a></li>
<li><a href=”contact.htm”>Contact</a></li>
<li><a href=”about.htm”>About</a></li>
</ul>
</body>
</html>