Materialize is a Responsive CSS Framework based on Google’s Material Design Concepts. Materialize aims to bring material design to web which was initially made by Google for Android. In this tutorial I will explain what material design is and then we will build a blog home page using Materialize.

In this post I want to explain you how to implement phone shake detection using jquery. Using this I had implemented an interesting concept that shake the mobile device and get the product discount. Very easy to use add this to your e-commerce project, sure this user experience feature will attract the people for more sales. Please try these live demos with your mobile device, this works with mobile web browser device accelerometer.

I said earlier the mobile revolution has been started, now time to build mobile web application for your web projects. Many third party platforms like Apache Cordova and Phonegap are offering that you can convert web application into native mobile application. This tutorial will help you how to design iOS style switch button component using HTML, CSS and Jquery. Specially I love CSS :before and :after pseudo-elements, this helps you to minimize the HTML code.

Timeline design is the current web trend that visualizes the data in an interesting way. Today I want to discuss about how to design a timeline in a simple way with JSON data feed , that using CSS pseudo elements such as :before and :after. Pseudo elements are used to apply special effects to selectors. This post is a combination of my previous post, please take a quick look at this demo and try demo script with your WAMP server.

Last some days I have been working with AngularJS, it is a Javascript MVC framework created by Google. Now Angular.js is my personal favorite framework to build better architecture web projects, especially for RESTful web services. It improves HTML with new attributes and expressions in order to define powerful templates directly in your HTML page.

I received lots tutorial requests from my readers that asked to me, how to play a notification sound on website chat?. We implemented this in a simple chat box application using Jquery and HTML5 audio tag, it is just five lines of code. Use Modernizer library for Internet Explorer HTML5 support, please turn on the volume and try this live demo.

This is right time to adopt HTML5 semantic markup tags into your website design. W3C has conducted a study of over billion websites and found that the most of common div IDs and classes are footer, header, menu, content, title and nav. HTML5 semantic markup elements that can convey the purpose of the element to developers, browser and search spider algorithms.

Are you working with HTML5, then take a quick look at this post that explains how to develop a offline web project using HTML5 application cache. Most of the latest browsers have caching mechanisms, this gives three advantages reducing server load, increases web page speed and office access specially for gaming website.

If you are working with mobile web applications, then you must adapt new HTML5 components. This post explains you how to implement new HTML5 input types while creating forms in mobile web projects. Take a look at these screen shots of the new input types in browsers that support in iPhone. and iPad.

Last some days I have been working with HTML5 canvas, sure it’s going to change the web future. I had implemented a snake game with HTML5 canvas + Javascript. Just take a look this live demo, it’s simple and light weight code you can use this script in 404 error pages and site down maintenance.