Kapil Chotwani

HTML5 enthusiast.

HTML/UI/CSS

Create your custom Icon Fonts with Icomoon

In the modern web, everybody wants their site should response quick and fast. This blog is not related to any web performances, but it will talk one key factor of web performance which is using CSS icon fonts instead of images. Nowadays using icon fonts is very popular and useful. The purpose of creating a custom icon fonts library is...

01-Nov-2015

HTML/UI/CSS, Technology

Sass : Nesting selectors and properties

Sass is a well known framework of CSS. It's an efficient and reliable tool, which gives us great power to write CSS in precise way. Sometimes we (Front-end Developers) all wonder that we wouldn't be able to enjoy writing CSS. However, as soon as Sass came in our life, we discovered this was the way to go when working with CSS. Please...

08-Jul-2015

HTML/UI/CSS, Technology

How to compile SASS files ?

Sass (Syntactically Awesome StyleSheets) program automatically compiles Sass files as CSS files. This is an extension of CSS. It allows us to use variables, nested values, mixin, inline imports etc. How to install Sass ? Step 1 - Download and Install Ruby gem (https://rubygems.org/). On a MAC machine, GEM comes pre-installed, so MAC...

02-Jul-2015

HTML/UI/CSS, Technology

Difference b/w Display:inline and inline-block

The CSS property "Display" is very useful and commonly used property of CSS which contains lots of values. In this blog we'll talk about only "display:inline" and "display:inline-block". We generally use both these properties to allow other elements to sit to their left and right but it has some difference which is explained below. ...

09-Jun-2015

HTML/UI/CSS, Javascript/Ajax/JQuery

How to emulate different screen resolutions in Chrome?

In the modern web world we all know the importance of a responsive web design. As a web developer, I have to test my application in different resolutions. Most of us will use the different devices to test our applications, but we can get rid of this problem by using Emulation feature in Chrome browser. (You will find this...

31-Oct-2014

HTML/UI/CSS

Common Mistakes of PSD to Responsive Conversion

In the world of web, technology is changing everyday. Smartphones and tablets are changing the way of internet usage and taking web everywhere. Responsive web design (RWD) is around from some years now. CSS media query is helping us in making of responsive template for different resolution of mobiles and tablets. What is Responsive Web...

18-Jun-2014

HTML/UI/CSS

5 most useful chrome extenstions for Web Developer

If you are a Chrome user, you must like it's user interface, speed and simplicity. Apart from that if you are a Web developer then you'll surely need to add some extra functionality in your browser. We are going to look at some of the most useful Chrome extensions for Web developer. 1. Window Resizer This extension changes the...

13-May-2014

HTML/UI/CSS

CSS3 : Media Queries

We can use Media queries to port our website for different resolutions. Media query is very useful tool when website are viewed on a huge range of devices. With very little change, you can make an existing website mobile and tablet compliant. As a HTML developer, if i had to build multiple version of each page to cater to each...

22-Oct-2012

HTML/UI/CSS

How to customize input type file upload ?

We can transform the look and feel of almost every element of HTML but it is quite difficult to apply style and change the look of input type file. This tag is use for choosing a file from local machine and upload it on web. In one of my project i have tried to change the look of input type file but i faced a lot of problems. I was not...

27-Sep-2012

HTML/UI/CSS

HTML5: Making editable elements

HTML 5 provides some very good features, one of it is EDITABLE Elements.   It is very helpful in creating dynamic HTML5 applications, and very simple to use.   so lets keep the blog short and sweet and see the code which is as follows [html] <h1>Todo List</h1> <ol...

26-Sep-2012

HTML/UI/CSS

960 Grid System

The 960 Grid system contains 960 pixel width. This is a CSS Framework. There are 3 types of grids in 960 Grid stystem, that is 12-Column Grid 16-Column Grid 24-Column Grid It is in fact based on a very simple and a basic principle of designing – ALIGNMENT. The 960 Grid system comes with framework sheets for designing the...

11-Sep-2012