Featured
-
Creating Horizontal Menu Bar Using Html and CSS
Hello readers, If you want to create a horizonta
by nitish.rawat -
Custom checkbox using jquery
Hello Reader ! Here is an example how to make
by mukul.kant -
How to make Sticky navigation
Hello Readers ! Below is an example of sticky n
by mukul.kant -
Smoke Font Animation
Hello Friends, The following codes below is an an
by kushal.kant -
How to Make A Simple DropDown in HTML With The Help of Jquery and CSS
You Can Use Below Code to Make A Simple Drop D
by indresh.kumar
Tags
How to get city name with geolocation API from a input form ?.
Hi Reader's,
Welcome to FindNerd, today we are going to discuss how to get city name from google maps from a PHP input form.
If you are trying to get city name displaying location information based on the IP address geolocation fro...
The Grid system in Skeleton Framework
Skeleton is a lightweight framework for CSS . It specifically has two CSS files: the popular normalize.css file and the skeleton.css file.
The grid system of Skeleton is used create responsive website hence it's a most important part if Sk...
Scraping a big HTML Table through a single command
Hello Everyone,
We have seen a lot of websites having big tables in them with lots of rows and columns.
What if someday being a developer you feel the need of getting all that data from the website at once without going the nasty way ...
Table pagination using html
Table pagination is a simple code that will give new effect to the user for creating a long html table into compact manner, This can be possible through simple line of code of javascript and html, for better look and touch up User will use css to...
How to apply image in the checkbox using CSS
Hello Readers, Here is simple line of code that will be useful for applying different color in checked or unchecked state or User can apply different icons to it, This will be only possible using HTML and CSS, User can see below how these line of...
Disabling Button click action using jquery and Html
Disabling Button click action and Enabling when checkbox is checked:
We can disable button click action easily using Html and can enable it using jQuery.
Html code to disable a button:
<h1 class="redeem-head">Redeem Portfolio<...
Creating contact form using HTML/BOOTSTRAP and CSS
If you want to create simple contact form using html/bootstrap and css, below example will helps you.
Firstly we will create the HTML form which will display basic form fields. It will ask users to submit their Name, Email Address an...
How to replace localhost by project name from URL
Hello Reader's if you are working on single project and want to rename localhost to any other word then this blog is very helful to you.
So let's start with the following steps
Step 1 : Open httpd.conf file you can f...
Create simple responsive form using html and css
If you want to create simple responsive user regestration form using html and css, below example will helps you.
In the below code I have create complete responsive form that includes several different elements and attributes. These ...
How to hide a div with animation using HTML
Hello Reader's if you are making the hide and show events in your website with animations effects, Then this blog is very helpfull to you.
So lets start, Suppose there is div you want it to be hide everytime a user hits a hide checkbox. We...
Full page background slide show
Hello Readers,
To make full page background slide show I have used the below mention code. The code is very simple. If you want full background slide show in your website you can easily use this code.
Here is the demo for background images ...
Hiding div elements in a responsive layout using bootstrap classes
Hiding div elements in a responsive layout using bootstrap classes:
We can easily hide a div block on a particular layout like for extra small devices(mobile) or for tablets or for desktop using bootstrap classes.
Classes
De...
How to make nav tabs using html code
Nav-Tabs can be really useful especially for content-crowded web sites or in that project where large number of interlinked pages to it. By using nav-tab in html a user can save plenty of space just by placing your block of content in tabs and di...
TYPE OF LIST IN HTML
In html we use list attribute for arranging data in the form of list.
Their are two types of list in html.
Ordered List
Unordered List
ORDER LIST
If we want to put our data in numbered form rather than bullets then ordered list wil...
HOW TO TAKE INFORMATION FROM USER USING HTML FORMS
When we want to take(collect) information from user or those who are visiting site, for this purpose html forms are use.
for eg:- for user registration in any social site, we want to collect his personal information like his name,last name, ema...
TABLE TAG
If we want to print data in the form of table in html we use TABLE tag. Table contain rows and columns.
For creating rows in table we use
tr tag with in table tag.
For creating columns in table we use
td tag with in tr tag.
Syntax
...
Progress bar
Progress Bar
Progress bar is used for up-to-date feedback from the user's action, it can also be made a user indeterminate.This bar will be helpful when the length of the task is unknown for the user. If you are using progress bar to show real p...
Bootstrap-Pagination
Hello friends, Here is simple code of using Pagination. You can use this code to make your page more attractive and give a easy access by reaching on several pages from a single columns of links.
Pagination is a navigation tool that will help...
@media Screen
Media rule in CSS is very attractive way to define different style rules for various types of screens(tablets/mobile screen) Media queries look at the capability of the device and be used to check various things:
Height and Width of the ...
Multiple images in background
It is easy to add multiple images in the background by using HTML and CSS code only. we can use one image which will repeat across the top i.e (repeat-x) and the another one will across the entire page or it is simple way to adjust every image p...
HTML LAYOUTS
A layout of a webpage plays an important role in providing a good look to our webpage. A good,attractive and beautiful design can be provided only by a person having good creativity skills that's why designing part of a website is not a easy task...
HTML BACKGROUNDS
Usually any webpage that has been created is with a white background by default unless until we provide some styling to it.like background color,background image,border-,any pattern or transparent backgrounds etc.
HTML background styling ca...
How to disappear a div with explode effect using Jquery
Hello Reader if you want to hide or disappear a div then you can do it by exlpode effect. This will driven by Jquery.
First create a blank html file name is exlodeeffect.html and its code will go like this:-
<html lang="en">
&...
How to show user's Lat and Long using google script
Hello User if want to show user's lat and long to screen then you can use the code as below:-
First you have to create a html page and named it file.html and paste the following code in it.
<!DOCTYPE html>
<html>
<body>
...
How to insert special symbols in HTML
Hello Reader! If you are new to web desingning and you need to insert some special symbols in your web page then this blog is very helpful for you.
You might have seen copyright symbol , This type of symbol will only generate if you insert their...
JQuery - eq( index ) Method
JQuery have DOM filter methods which we can use to filter out elements from a list of DOM elements.
It provides DOM traversal methods to help us select elements in a document randomly as well as in sequential method.
DOM Traversal Methods...
How to show custom lines on Google Map
Hello Reader's if you are integrating the Google Map in the website and you also want to show custom line on the map, Then this blog is very helpful you.
Lets see the working of this custom map.
<!DOCTYPE html>
<html>
<head&g...
How to show bounce effect on google map marker
Hello Reader's if you are integrating the google map with marker showing your address, Then you can also make the marker with bounce effect.
Lets see my code as below:-
<!DOCTYPE html>
<html>
<head>
<script
src="http:...
How to expand the div with a click using Bootstrap
Hello Reader's if you are new to Bootstrap, And you want to expand the div with a single click.
Lets see the example below:-
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-sc...
JSON
Javascript Object Notation
JSON is a way to transfer data or information from one page to another page.
JSON stands for JavaScript Object Notation
JSON is a lightweight data transfer format
JSON is language indepe...
DOM in HTML JQUERY
DOM Document Object Model
DOM is structure that is used to invoke the elements of a page or a script file. It is the hierarchy of structure that
a particular document have where we want to invoke the elements of that particular document.
F...
What is a Web Worker?
Hi all,
Below is a short description of web workers.
What is a Web Worker?
Web worker is JavaScript which runs in backside without affecting the performance of site and it is independent of other the scripts,.
what web worker are f...
Bootstrap float
how to float an element to left or right.
Bootstrap provides predefined classes pull-right and pull-left which floats an element to the left or right according to the requirement. For example if you want to float an image to the right and text...
What is css gradients ?
Hello All,
Earlier, we have used image for gradients effect but now we will use gradient using css3 and we will see how to use many colors in gradient and only one color in gradient.
Gradients are declared by background-color but according ...
What is semantic elements ?
Hello all,
Semantic elements clearly defines its content. It means that elements which are recognize by their name in html for example <hedaer > , <nav> , <footer>. You can say it helps understand what is happening on the pag...
Table in HTML
With the help of HTML table, we can arrange the data in a proper format. HTML table consist of rows and columns.we use various tags for creating HTML table.
Tags used for creating HTML table:-
Table :- This is the very first tag for creati...
html link
How can you create image as a link in html.
You can make an image as an link as through following coding.This make your link more eye-catchy and you can also make logo as link thus making your page more effective.
<a href="default.asp"&g...
html address
html address.
html5 provides an inbuilt tag <address>.Through this tag you can define contact information of a document or article.The element between the address is displayed in italic and also most browsers will also add line break bef...
Column offseting.
How can we increase the left margin of a column in bootstrap.
In bootstrap we can increase the left margin of a column by adding class offset. for example by adding
.col-md-offset-4 moves .col-md-4 by four places.
<div class="row">
...
What is grid system ?
What is grid system ?
Grid usage to guide design and page layout is in practice for around 100 years now
Rationalism and New Objectivity came into picture in 1910s and 1920s due to ornamental design
This shift in design was responsib...
Text highlight
How to highlight a text in bootstrap
In bootstrap we can highlight the important text with the tag <mark>. Thus text can be easily highlighted and customization can be done as required.
As shown in example below name of country's get...
Gradient
How to create background of two colors.
In bootstrap we can create background of two colors with the help of gradient.You can also specify the angle os standard two color.
#gradient > .vertical(#333; #000);
#gradient > .horizontal(#...
Clearfix
how to clear floats in bootstrap.
Bootstrap provides an predefined class .clearfix through which you can clear floats just by adding this class to the parent element.
.clearfix() {
&:before,
&:after {
content: " ";
...
Feedback with optional icons
Feedback with optional icons.
Bootstrap provides classes to add optional feedback icons which would required manual positioning for inputs. Thus, it save a lot of time for making it user friendly. This can be done by adding class .has-feedback...
Validation states
Validation states
We can denote the state of a form through visual,color-based indications.This can be done through using classes as .control-label, .form-control, and .help-block.These are the validation styles for warning, error and success ...
Table specific customization
How to customize a table to your requirement.
We can also apply specific characterstics for a table.To define special style for a table we can add id attribute to the table.
<table id="t01">
<tr>
<th>Firstname</...
Table caption
How to add a caption to a table.
We can also give heading to a table making it more attractive.This can be done by adding caption attribute to the table.
<table style="width:100%">
<caption>Monthly savings</caption>
...
Table rowspan
How to create cell span of more than one column in a table.
To create a cell span of more than one row in a column we add the attribute rowspan to that column and designate its value.The value of rowspan determine the number of rows a cell spa...
Table colspan
How to create cell span of more than one column in a table.
To create a cell span of more than one column in a row we add the attribute colspan to that column and designate its value.The value of colspan determine the number of columns a cell ...
Table heading.
How to create heading in a table.
It is very easy to create heading in a table.We can do it by adding <th> tag for the content of row to be shown as heading.
<table style="width:100%">
<tr>
<th>Firstname<...
