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
Uses of dragging and dropping elements in HTML5
Dragging and dropping can enable users to drag an object from one destination point and drop it to different location into the same webpage. This is a very instinctive way for users to interact with your webpage.
Where we have to use Drag and ...
Introduction to Single Page Application System
A single page application is a web application designed approach that fits the data into a single page with the aim of providing compact coding, similar to the desktop application. It uses all the mordern browsers, html5 and ajax that helps in cr...
How to Design a Table using Div
Tables are the most powerful way to align elements in a proper/tabular way on a webpage. The concepts of table are very clear to designer, so it will be easier to create layout using table.
But tables have many problem like a layout through ...
CSS3 Hover effect
CSS3 Hover effect makes possible several changes to the single elements by adding many features to it, for example It includes feature like transition, transform and animation. That will add new effect to the simple div. The :hover selector is us...
Jquery .map() method
Jquery .map( callback ) method is used to project the contents that is used in the array and then map this object with the new set of array, It is able to create a new array for calling every elements. It provides function once for each set of an...
How to validate email address in HTML5?
HTML5 allows you to validate an HTML form field using a regular expression. The below HTML code validate an email address against a regex.
<input type="email" name="email" required pattern="[^@]+@[^@]+.[a-zA-Z]{2,6}" />
Te...
CSS3 Animation
An animation takes place when the style of an element changes.
To use the animation by CSS3 we have to define some keyframes. These @keyframes will be having the styles of an element at particular time.
For the CSS3 animation we need to speci...
Adding Effects using queue() Method
Queue() method is used in jQuery to returns a number of animations to be performed on the elements in the jQuery object. This method is used for the continuous looping of a jquery element. It returns the effect which is used in the queue. While q...
5 Deadly Mistakes to Avoid During Web Design and Development
Hey there! We as web designers, strive for perfection in everything, specially when it comes to developing websites to the nearest pixel. Alongside, it is also important ...
Storing and Retrieve Value Using Session Storage in HTML5
Hello Everyone!!
In this blog, we are going to know about the Session storage in HTML5. As we know that web can store the data locally with in the browser. We can store the data using sessionStorage without affecting the pe...
CRUD Operations Using WebSQL In HTML5 And jQuery
Hello!!
HTML 5 provides an API, called "Web SQL" API. It is new feature in HTML5 and it also helps to the developer for doing CRUD operation on the client side. It give the permission to client side for doing some operation:-
C...
An Overview to HTML KickStart Framework
Hello readers, Today In my blog I will discuss about a recent framework i.e HTML KickStart Framework.
It is useful for resolving the issues that have aroused in various frameworks and have tried to resolve them.
In...
An overview of Favicon
Hey Readers!
A favicon (acronym for favorite icon), is a file that is associated with a particular website and contains many icons. Browsers supporting favicons display the page's favicon in the address bar of the webpage or in a list of b...
Looping Over Objects using $.each() Method
Hello Readers!
Here I am going to explaining you about the $.each() method used in jquery.
The jquery function $.each() is a traversing method which loops through both arrays and objects. The length property of the arrays as an index is used fo...
Password Validation using HTML5
Hello Readers
In my last blog I have explained about how you can validate password with regular expressions using JavaScript, now in this blog, I’m going to tell you the HTML5 process for the same, so basically this article will guide yo...
Jquery Filtering Methods
The jquery filtering methods is used for the purpose for specifying the criteria, Those elements didn't matched with the criteria it will illuminate from the selection while the matched elements will be returned.
It has multiple methods like...
How to install Custom Fonts in an HTML site?
Hello Readers!
Fonts — What are they? The way we write text, the way we want text to appear to a user. i.e. , it is the style in which letters, numbers, punctuation and special characters are visually presented.
Fonts are not on...
Access Users' Geo-Location with HTML
Hello Everyone!!
Nowadays, We can use the HTML5 to find the Geo-location of the user. Earlier IP was the source of getting the location of the user so that we used additional scripting and also the calling of the server, but using h...
Explaination of cursor property
Cursor Property is used in CSS for defining the property of the cursor or the mouse cursor will look when User hover on it. The cursor-property is set to the element and it will give new look to the mouse pointer, It has various properties which ...
Explaination of CSS3 animation
Hello Readers!
In this blog, I am going to explain the concept of CSS3 Animations in simple words
CSS3 animation is used to animate the text from one CSS style to another and adding many effects to it.
Animations consist of two building bloc...
How does CSS3 @keyframe Animation Work?
The @keyframes property specifies animation code. To use CSS3 animation we need to understand @keyframe property.
This @keyframe property enables user to do multiple transition on the same property which is later performed in continuous sequence...
Stitched Effect using CSS
we can achieve numerous effects by simply using CSS, we just need to use our innovativeness and creativity. This time, as the title recommends, we are making stitched effect by simply using CSS.
For creating stitched effect, first, we hav...
Introduction to Favicon
FAVICON
Favicons are small icons usually of 16x16 pixels. These icons are used to represent the website we are visiting. This square icon is displayed at the left side of the browser's address bar.
It is also known as shortcut icon, web...
How to Create a Corner Ribbon With The Help Of Css
In this blog, I am going to demonstrate to you proper methodologies to make a corner ribbon with the help of css by utilizing various css properties for example with the help of transform, box-shadow and position we can make corner rib...
Embedded powerpoint presentation in your website
Hi there!
This blog post will tell you how to add Powerpoint slide presentation in your websites. We add images, colors, figures, charts etc and many other things in our website to make it look more interactive and appealing. Powerpoint presen...
How to draw different shapes with canvas?
Hello readers, today we will discuss canvas element for drawing different shapes like triangle and square. Canvas element of HTML is used to draw graphics on the web page. In my example, I am using this element to draw a triangle and square...
HTML helpers in MVC
Here you will learn about HTML Helpers. HTML helper is just a method which generates elements. This element represents the content which we want to add in HTML.
Below is the format of using HTML helpers in ASP.NET MVC framework...
Chapter 1: Bootstrap Overview
Nowadays Bootstrap is most popular front-end framework. This is very fast and easy to maintain. Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter. It is open source and released August 2011 on GitHub.
It has built-in component...
Checkbox validation with Html5
Hello Readers!
In my earlier blog post, I explained about the checkbox validation using Javascript. This blog post will explain you the same thing using HTML5. Let me give a brief overview of checkbox validation here too.
While fi...
Tips To Speed Up Your QuickBooks Performance
The acquaintance of QuickBooks with the bookkeeping scene makes various bookkeeping assignments, for example, overseeing inventories, installment planning, making payrolls, following transportation forms and different business parti...
HTML Symbols
Here is the brief introduction about the HTML symbols.
There are various mathematical or other symbols, which are not available on keyboard. In HTML we cannot add the angle sign with text, because it will take it as a tag. So we use HTML symbo...
id vs class attribute
There are many different kind of CSS selector which we can use to apply CSS style to an element in html. ID and Class are one of them. Here, in this this blog, I am going to explain you the basic difference between these two :-
1. I...
Chapter 5: Audio and video
HTML5 have native feature for audio and video facility and for it you do not need to have flash.
There are two tags <audio> and <video> it is very simple to add media in your website for it you just have to set the source path. B...
Chapter 4: HTML5 Canvas
Hello Readers,
To learn canvas you have basic understanding of HTML and JavaScript.
The HTML5 <canvas> tag gives you way to draw graphics via scripting (JavaScript). You can use it for photo compositions, graph and animation. Al...
Chapter 3: HTML5 Attributes
Hello Readers,
In the previous chapter we learn about html5 element, and now we learn about attributes
So, basically we have two type of attributes in html5 first can be used with any element so we define them globally and others are define...
Chapter 2: HTML5 syntax
Hi All,
HTML5 is much smarter, so its need simple syntax to specify it, Few of them are below:
Quotes are optional for attributes.
Uppercase tag names.
Closing empty elements are optional.
Attribute values are optional.
...
Custom drop down select box
Drop-down list is a common feature in HTML5 to create web pages attractive. It is a toggleable menu in which user can select one value from predefined list. First item will be shown selected automatically. To create a drop-down list we use <se...
Chapter 1: An Introduction to HTML5
Hello readers,
This is the my first post for html5 tutorial. Here are some basics for HTML's which will help you for the forthcoming post.
HTML5 is the most latest version of HTML. HTML5 is a markup language HTML documents described by ...
Custom checkbox having Images
Hello Readers
We are all familiar with Checkbox and Custom Checkbox too, In this blog I am Explaining about Custom checkbox having images, Images are used in checkbox to make them look more interactive and appealing. We must have surely notice...
How to add Attributes in haml
Hello Readers!
In the previous Blog I have explained about HAML, now I am going to explain you that how we can add attributes in It. This syntax is much more similar to the HTML tags
For Example:-
...
Type attribute of script and style ?
Hello Readers,
Probably sometimes you see it when you use internal CSS, internal JS or in link text, and you are not if you are not using this (eg.- type="text/css"), also your script and CSS works.
So why we need this?
In the ...
What is HAML?
HAML(HTML abstraction markup language) provides an elegant syntax which is easy to understand, maintain and use.
It is introduced by Hampton Catlin with its initial release in 2006, it is used for making HTML simpler, easier and clean...
HTML Embed Multimedia
Many times you have to include music or video into your website. The most effortless approach to add video or sound to your website is to use the HTML tag called <embed>. This label makes the web browser to itself incorporate controls for t...
What is favicon?
Favicon was first used in march 1999, when Microsoftft released Internet Explorer 5 that time it was used to make tabs a favorites (bookmarks).
Favicon is a small square 16×16 pixels image, Basically It is used on tab at the web browsers...
Different border properties using CSS
We have used the different properties of the border like width, color etc.
All the border properties are used in one time and in order: border-width, border-style and border-color.
Syntax of border:-
border: bo...
Use of dir attribute in Html
dir attribute:
It is used to specify the direction of text in Html element content. In Html5 it can be used with any html element. Prior to Html5 it cannot be used with <base>, <br>, <frame>, <frameset>, <hr>, <...
How to set minimun height and width of cropbox in Cropper Jquery Plugin
Setting minimun height and width of cropbox:-
Hello Readers!
In this blog I am going to explain you minheight and minwidth of a cropbox, which is used in the Cropper Jquery Plugin for selecting an image to crop, By default this Cropbox size...
Explaination of Cropper Jquery Plugin
What is Cropper jquery?
Cropper jquery plugin is lightweight, simple, easy, effortless cropping plugin that helps to crop images in runtime using Cropper jquery, it help to get a cropped image along with several tools that adds different effec...
How to add subtitles in html5 videos tags ??
Hello Everyone !!
The <track> tag is use to add subtitle file to the <video> in HTML5. The <track> tag has following attribute:
Kind(gives the value of subtitle, indicating the type of content the files contain&nbs...
Counter-increment CSS
CSS counters are like variables. The value of CSS counters can be incremented by CSS rules. The addition value will track how many times the variable is used.
CSS counters are having following properties:-
counter-reset
c...
