HTML Basic

 A simple HTML document

 Specify headings for the content
 Inserting paragraphs of text content
 Creating links to other HTML documents or Web resources
 Inserting images into the HTML document

HTML Text
 Headings - h1 to h6
 Paragraph and line breaks
 Text formatting
 Preformatted text (Preserve line breaks and spaces)
 Sub and Superscript text
 Long and short quotations
 Abbreviations and acronyms
 Marking deleted and inserted text
 Setting text direction of an element
 Insert contact information
 Inserting comments
 Inserting horizontal lines
 Computer output tags

HTML Links
 Create hyperlink
 Using image as a link
 Open link in a new browser window
 Navigate inside page - Jump link
 Move outside of an iframe
 Creating a mail to link - A link that sends an e-mail

HTML Images
 Setting width and height of the images
 Aligning images
 Make a hyperlink of an image
 Creating an image-map - An image with clickable regions

HTML Tables
 Making a simple table - The most basic form of a table
 Setting the dimension of a table
 Specify the table caption
 Tables with borders - Adding the default table borders
 Sets the padding of table cells - The cellpadding attribute
  Sets the distance between table cells - The cell spacing attribute
 Table cells that span more than one row/column - The row span/col span attribute
 Column groups - The col and col group elements

HTML Lists
 Creating an unordered list
 Creating an ordered list
 Creating a definition list
 Creating a nested list - Single level
 Creating a nested list - Multi level

HTML Forms
 Creating text input fields
 Creating password input fields
 Creating HTML5 new input fields
 Checkboxes and radio buttons
 Select boxes - A drop-down list
 Select box with a pre-selected value
 Grouping of options inside a select box
 Enable multiple selection inside a select box
 Text area - A multi-line text input field
 Creating buttons
 File select field
 Grouping similar form fields
 Submit or reset a form - The use of submit and reset button

HTML Styles
 Style HTML elements using inline styles - The style attribute
 Style HTML elements using embedded styles - The style element
 Link to an external style sheet - The link element
 Learn more about styling of HTML elements

HTML iFrame
 Using an iframe to embed a web page inside another HTML document
 Removing the default frameborder from an iframe
 Opening linked web pages inside an iframe

HTML Scripts
 Insert JavaScript inside the HTML pages to add interactivity - The script element
 Include external JavaScript file inside the HTML pages
 Provide alternative content if script isn't supported or disabled - The no script element
HTML5 New Input Types
 Creating HTML5 color input type
 Creating HTML5 date input type
 Creating HTML5 datetime input type
 Creating HTML5 datetime-local input type
 Creating HTML5 email input type
 Creating HTML5 month input type
 Creating HTML5 number input type
 Creating HTML5 range input type
 Creating HTML5 search input type
 Creating HTML5 tel input type
 Creating HTML5 time input type
 Creating HTML5 url input type
 Creating HTML5 week input type

HTML5 Canvas
 Embedding canvas into HTML documents
 Drawing a line onto the canvas
 Drawing an arc onto the canvas
 Drawing a rectangle onto the canvas
 Drawing a circle onto the canvas
 Setting the stroke color and width on canvas
 Setting the cap style for the stroke on canvas
 Filling color inside a rectangle shape on canvas
 Filling color inside a circular shape on canvas
 Filling linear gradient inside canvas shapes
 Filling radial gradient inside canvas shapes

HTML5 SVG
 Embedding SVG into HTML documents
 Creating a line using SVG
 Creating a rectangle using SVG
 Creating a circle using SVG
 Rendering text on web pages using SVG
 Apply transformation while rendering text on web pages using SVG

HTML5 Audio
 Embedding audio in HTML documents
 Defining alternative sources for audio element
 Linking the audio files
 Inserting audio in HTML documents using the object element
 Inserting audio in HTML documents using the embed element
HTML5 Video
 Embedding video in HTML documents
 Defining alternative sources for video element
 Inserting video in HTML documents using the object element
 Inserting video in HTML documents using the embed element
 Embedding the YouTube video in HTML documents

HTML5 Web Storage

 Storing data with HTML5 local storage
 Storing data with HTML5 session storage

HTML5 Web Workers

 Doing JavaScript works in the background with HTML5 web worker
 Terminating a running web worker

HTML5 Geolocation
 Getting visitor's coordinates with HTML5 geolocation
 Handing errors and rejections while working with HTML5 geolocation
 Showing location on Google map in image format
 Showing location on interactive Google map
 Getting current location of a visitor using HTML5 geolocation

CSS3 Examples
This section contains a whole bunch of examples demonstrating the various CSS properties
and its features in real action.

CSS Text
 Setting the text color
 Alignment of text
 Indentation of text
 Decoration of text
 Sets the spacing between characters
 Sets the spacing between words
 Sets the spacing between lines of text
 Preserving white-space and line breaks
 Text wrapping inside an element
 Vertical alignment of an image inside text

CSS Fonts
 Sets the font of a text
  Sets the size of the font
 Sets the style of the font
 Sets the variant of the font
 Sets the boldness of the font
 Setting the all font properties in a single declaration - The font shorthand property

CSS Links
 Style different states of a link
 Remove the default underline from hyperlinks
 Remove the dotted outline from hyperlinks
 Create link boxes
 Image rollover

CSS Lists
 Specify bullets and numbering in the lists
 Sets the position of list-item markers
 Sets an image as list-item markers
 Crating a simple dropdown menu
 Setting all list properties in a single declaration - The list-style shorthand property

CSS Tables
 Setting the borders of a table
 Specify the dimension of a table
 Creating better tables by collapsing the table borders
 Setting the horizontal alignment of text inside table cell
 Setting the vertical alignment of content
 Specify how empty cells should be displayed
 Specify padding of table cell
 Specify table layout algorithm - Automatic or Fixed
 Setting the position of table caption

CSS Background
 Setting the background color of an element
 Setting the image as element's background
 Repeating background image horizontally or vertically
 Specify the positioning of background image
 A fixed background image that will not scroll with its containing element
 Setting the all background properties at once - The background shorthand property
 Setting the size of the background image
 Setting the background clipping
 Setting the background origin
 Adding multiple backgrounds to an element

CSS Units
  Working with absolute units (e.g. px, pt, cm etc.)
 Working with relative units (e.g. em, ex, % etc.)

CSS Dimension
 Setting width and height of an element
 Setting maximum width and height of an element
 Setting minimum width and height of an element
 Controlling overflow

CSS Alignment
 Alignment of text and inline elememt inside the block-level element
 Center alignment of block elememt using margin property
 Aligning element horizontally using the float property
 Aligning element horizontally and vertically using the position property
 Prevent parent collapsing with the clear property
 Creating a Simple horizontal menu

CSS Positioning
 Position an element relative to the browser window
 Position an element relative to its parent element
 Position an element relative to its normal position
 Overlapping of elements using the z-index property

CSS Display
 Hide an element using the visibility property
 Remove an element from DOM using the display property
 Display an element as an inline element
 Display an element as a block element
 Collapsing table elements

CSS Border and Outlines

 Draw border around element
 Draw border on the individual sides of an element
 Setting different styles for the borders
 Setting the all border properties at once - The border shorthand property
 Creating the rounded corners around an element
 Using images for creating borders
 Draw outline around element
 Draw border around element without effecting the sorrounding elements

CSS Margin and Padding

 Sets the margins for individual sides of an element
  Setting all margin properties in a single declaration - The margin shorthand property
 Sets the paddings for individual sides of an element
 Setting all padding properties at once - The padding shorthand property

CSS Opacity
 Setting transparency of an element
 Image rollover effect and transparecy
 Text in a transparent box

CSS Generated Content

 Specify the quotation marks
 Automatic numbering of sections and category
 Insert generated content using CSS

CSS Pseudo-classes
 Setting styles for different states of hyperlinks
 Setting styles for form element in focus using the :focus pseudo-class
 Setting the styles for first child of an element using the :first-child pseudo-class
 Setting styles for last child of an element using the :first-child pseudo-class
 Setting styles for nth-child of an element using the :nth-child pseudo-class
 Setting styles for specific language using the :lang() pseudo-class
 Using pseudo-classes with selectors

CSS Pseudo-elements
 Creating the drop cap effect using the ::first-letter pseudo-element
 Styling the first line of a text differently using the ::first-line pseudo-element
 Insert some content before and/or after an element using the ::before and/or ::after
pseudo-element
 Using pseudo-elements with classes

CSS3 Gradients
 Creating linear gradients from top to bottom direction
 Creating linear gradients from left to right direction
 Creating linear gradients along the diagonal
 Setting the direction of linear gradients using angles
 Creating linear gradients using multiple color stops
 Setting the location of color stops while creating the gradients
 Repeating the linear gradients
 Creating radial gradients
 Setting the shape of radial gradients
 Setting the size of radial gradients
 Repeating the radial gradients
 Using transparency with gradients
CSS3 Drop Shadows
 Creating box shadow effect
 Adding multiple box shadows to an element's box
 Creating text shadow effect

CSS3 2D Transforms
 Moving the elements using the translate() method
 Rotating the elements using the rotate() method
 Increasing or decreasing the size of an element using the scale() method
 Applying 2D transformation using the matrix() method
 Applying multiple transformation to an element

CSS3 3D Transforms
 Moving an element in three dimensional space using the translate3d() method
 Rotating an element in three dimensional space using the rotate3d() method
 Scaling an element in three dimensional space using the scale3d() method
 Applying 3D transformation using the matrix3d() method
 Applying multiple 3D transformation to an element

CSS3 Transitions
 Applying transition effect to background-color
 Applying transition effect to multiple property
 Setting all transition properties at once - The transition shorthand property

CSS3 Animations
 Animating elements on a web page
 Defining keyframe while creating animations
 Setting all animation properties at once - The animation shorthand property

CSS3 Multi-column Layouts

 Creating multi-column layouts
 Setting column count or width
 Setting gap between the columns
 Adding rule or vertical lines between the columns

jQuery Examples
This section contains a whole bunch of examples demonstrating the various jQuery features
and effects in real action.
jQuery Basic
 Including jQuery in HTML document
 Display "Hello World" message using jQuery
 Standard syntax of jQuery
 Shorthand syntax of jQuery
 Change text color of the elements using jQuery
 Change text contents of the elements on button click using jQuery

jQuery Selectors
 Selecting an element by ID in jQuery
 Selecting elements by class name in jQuery
 Selecting elements by element name in jQuery
 Selecting elements by attribute in jQuery
 Selecting elements by compound CSS selector in jQuery
 Selecting elements by jQuery custom selector

jQuery Events
 Run code on document ready event in jQuery
 Run code on click event in jQuery
 Run code on double-click event in jQuery
 Run code on hover event in jQuery
 Run code on mouseenter event in jQuery
 Run code on mouseleave event in jQuery
 Run code on keypress event in jQuery
 Run code on keydown event in jQuery
 Run code on keyup event in jQuery
 Run code on change event in jQuery
 Run code on focus event in jQuery
 Run code on blur event in jQuery
 Run code on submit event in jQuery
 Run code on resize event in jQuery
 Run code on scroll event in jQuery

jQuery Show and Hide Effects

 Creating a simple show hide effect in jQuery
 Creating animated show hide effect in jQuery
 Creating simple toggle effect in jQuery
 Creating animated toggle effect in jQuery

jQuery Fading Effects

 Creating fade-in and fade-out effect in jQuery
 Setting the duration of fading effect in jQuery
 Creating fade toggle effect in jQuery
  Setting the duration of fade toggle effect in jQuery
 Fading elements to a certain opacity in jQuery

jQuery Sliding Effects

 Creating slide-up and slide-down effect in jQuery
 Setting the duration of sliding effect in jQuery
 Creating slide toggle effect in jQuery
 Setting the duration of slide toggle effect in jQuery

jQuery Animation Effects

 Creating animation effect in jQuery
 Animate multiple CSS properties in jQuery
 Animate multiple CSS properties only by one in jQuery
 Animate CSS property using relative values in jQuery
 Animate CSS property with predefined values in jQuery

jQuery Chaining
 Method chaining in jQuery
 Breaking method chaining code in multiple line in jQuery
 Exceptions method chaining in jQuery

jQuery Callback
 jQuery effect method without a callback function
 jQuery effect method with a callback function
 Executing callback multiple times in jQuery

jQuery Get & Set Contents

 jQuery get text contents of the elements
 jQuery set text contents of the elements
 jQuery get HTML contents of the elements
 jQuery set HTML contents of the elements
 jQuery get value an attribute of an element
 jQuery set an attribute for the elements
 jQuery set multiple attributes for the elements
 jQuery get the value of a form element
 jQuery set the values of the form elements

jQuery Insert Content

 jQuery insert HTML at the end of the elements
 jQuery insert HTML at the beginning of the elements
 jQuery multiple HTML elements at the beginning or end of the elements
 jQuery insert HTML before and after the elements
  jQuery insert multiple HTML elements before and after the elements
 jQuery wrap HTML around the elements

jQuery Remove Elements & Attribute

 jQuery remove the contents of the elements
 jQuery remove the HTML elements from the page
 jQuery remove the parent element of an HTML element from the page
 jQuery remove an attribute from the HTML elements

jQuery Add and Remove CSS Classes

 jQuery add a CSS class to the HTML elements
 jQuery add multiple CSS classes to the HTML elements
 jQuery remove CSS classes from the HTML elements
 jQuery remove all the CSS classes from the HTML elements at once
 jQuery toggle the CSS classes of the HTML elements

jQuery Get and Set CSS Properties

 jQuery get the value of a CSS property of an element
 jQuery set the value of a CSS property for the elements
 jQuery set the value of multiple CSS properties of the elements

jQuery Dimensions
 jQuery get width and height of an element
 jQuery set width and height of the elements
 jQuery get inner width and height of an element
 jQuery set inner width and height of the elements
 jQuery get outer width and height of an element
 jQuery get outer width and height of an element including margin area
 jQuery set outer width and height of the elements

jQuery Traversing
 jQuery select the direct parent element of an element
 jQuery select all the ancestor elements of an element
 jQuery select the specific ancestor elements of an element
 jQuery select all the ancestor elements between two elements
 jQuery select the direct children element of an element
 jQuery select the specific descendant elements of an element
 jQuery select all the descendant elements of an element
 jQuery select all the sibling elements of an element
 jQuery select specific sibling elements of an element
 jQuery select the next sibling element of an element
 jQuery select all the next sibling elements of an element
 jQuery select all the following sibling elements between two elements
  jQuery select the previous sibling element of an element
 jQuery select all the previous sibling elements of an element
 jQuery select all the preceding sibling elements between two elements

jQuery Filtering
 jQuery select the first element only
 jQuery select the last element only
 jQuery select an element by index
 jQuery select an element by negative index
 jQuery filter the selection of elements via selectors
 jQuery filter the selection of elements through a custom function
 jQuery select the elements that has specific child elements
 jQuery select the elements that does not match certain condition
 jQuery select the elements that did not pass certain function test
 jQuery select the elements by range of indices
 jQuery select the elements by range of negative indices

jQuery Ajax
 jQuery load content inside an element from a file
 jQuery execute code based upon load request response
 jQuery load content of selected element from a file
 jQuery make ajax request using HTTP get method
 jQuery send data with ajax using HTTP get method
 jQuery submit form data with ajax using HTTP post method

jQuery No-Conflict Mode

 Putting the jQuery into no-conflict mode
 Prevent conflict between jQuery and other JavaScript libraries
 Avoid conflict when including the jQuery before other JavaScript libraries

A <a> <abbr> <acronym> <div> <dl> <dt> E <em> <link> M <map> <mark> <select> <small>
<address> <applet> <embed> F <fieldset> <menuitem> <menu> <source> <span>
<area> <article> <aside> <figcaption> <figure> <meta> <meter> N <strike> <strong>
<audio> B <b> <base> <font> <footer> <form> <nav> <noframes> <style> <sub>
<basefont> <bdi> <bdo> <frame> <frameset> G, <noscript> O <object> <summary> <sup> T
<big> <blockquote> H <head> <header> <ol> <optgroup> <table> <tbody> <td>
<body> <br> <button> C <hgroup> <h1> – <h6> <option> <output> P <textarea> <tfoot>
<canvas> <caption> <hr> <html> I <i> <p> <param> <pre> <th> <thead> <time>
<center> <cite> <code> <iframe> <img> <input> <progress> Q <q> R <title> <tr> <track>
<col> <colgroup> D <ins> J, K <kbd> <rp> <rt> <ruby> S <s> <tt> U <u> <ul> V
<datalist> <dd> <del> <keygen> L <label> <samp> <script> <var> <video> W
<details> <dfn> <dir> <legend> <li> <section> <wbr>