Codepal

We develop enthralling web experiences.

Category Archives: Tutorials

Giving back to the community!

Quick Tip: Clear Cache & Hard Refresh on Chrome

Posted on by Sumeet Chawla

Cache issues are really irritating while developing on front end technologies. Here is a quick tip on how you can clear the cache and do a hard refresh on Chrome Browser

CSS3 Based Masonry Layout With jQuery Masonry as Fallback

Posted on by Sumeet Chawla

Masonry layouts are a rage nowadays. Ever since Pinterest became a big hit, many sites have started using this layout to build some really creative websites. Here is a quick tutorial on how to build one using pure CSS3 and having the jQuery version as fallback.

WordPress Year in Review: The Best Tutorials of 2011

Posted on by Sumeet Chawla

2011 has seen a lot of changes in Wordpress with loads of new features and updates. We also saw Wordpress grow as a CMS. It has become the top most CMS platform used in the world. It has a content management system market share of around 54.3% Here is a round up of some of the the best, unique and useful Wordpress tutorials written in 2011 and what to expect in the future.

Quick Tip: Backing Up Your Blog with VaultPress

Posted on by Sumeet Chawla

As with almost every other web app, WordPress stores information in a database. There’s always a chance that your data could be lost or corrupted, and it’s wise to have a solid backup strategy in place. This is where VaultPress enters the scene to save the day, providing complete backup and security for your WordPress site.

40+ Stunning WordPress Portfolio Themes

Posted on by Sumeet Chawla

WordPress is the most popular blogging and CMS platform out there. The vast amount of features and the flexibility it provides, one can create mind blowing themes for it. Here is a round up list of the most stunning WordPress themes, created specifically for displaying your design portfolio.

Quick Tip: Using Shortcodes in Theme Development

Posted on by Sumeet Chawla

The WordPress Shortcode API was introduced to WordPress in Version 2.5. Since then, it has become a widely used method for allowing quick customisation of layout and inserting certain formatting snippets. But shortcodes can be equally useful when creating WordPress themes – here’s how you can make full use of them!

Create a Multi-Layout Portfolio with WordPress

Posted on by Sumeet Chawla

WordPress, as a content management system, is often used for creating portfolio websites. With the evolution of user interface design and functionalities, a new trend has emerged: displaying portfolio items in different layouts. This tutorial details the process of creating a dedicated portfolio section in WordPress’ backend, and using jQuery and CSS3 to display the portfolio in a classy manner.

Integrating Cloud Zoom with WP e-Commerce Gold Cart Gallery

Posted on by Sumeet Chawla

WP e-Commerce' s new version got integrated with Wordpress in a much better manner and has become one of my favourite Wordprss e-Commerce plugins. One of my projects required the integration of Cloud Zoom jQuery plugin with the Gold Cart Gallery. So here is a short hack on how to achieve it in a convincing manner.

How to Create a FAQ Page with WordPress and Custom Post Types

Posted on by Sumeet Chawla

In the web world, a FAQ page is created specifically for the viewers/customers, and contains general questions and their respective answers about a particular product or service. This tutorial details the process of creating a dedicated FAQ section in the WordPress backend with custom post types, as well as how to spice up the actual page a bit by using jQuery and CSS.

Creating a Neon Blink Effect for your Forms using CSS3 and jQuery

Posted on by Rakesh

Our latest tutorial at 1stWebDesigner. How cool will it be to have a glowing blink effect behind your input boxes in a form without using Flash? Well, then this tutorial teaches you on how to build one in the easiest manner possible.

How to Create a Cool Slide Out Panel with CSS3 only

Posted on by Sumeet Chawla

Many sites have a really cool hidden panel which contains some relevant information and this panel is revealed to us, with a cool animation, when we click on a particular button or hover over it. This has usually been achieved using jQuery. But now as we advent towards the future and CSS3 is becoming a reality, here is a tutorial on how to build an animated slide out panel using only CSS3.

The ‘Select’ Problem After Using jqTransform and its Solution

Posted on by Sumeet Chawla

Recently, I was working on a project which required a customized form with only select boxes. I used jqTransform to customize the form and while working on it I discovered that after transforming the select box into a list of hyperlinks, the ‘change’ method of the select box doesn’t work at all. As ‘on-value-change’ event is a very important function for any drop down list box so here is a very simple solution to manipulate it while using jqTransform.

Spice Up Your Twitter Feed Display Box Using CSS

Posted on by Sumeet Chawla

Everyone has a twitter account nowadays and all like to showcase their most recent tweets on their websites. This is generally done by displaying the tweets enclosed in a visually appealing box or the twitter bird shouting it. Here is a small tutorial on how you can increase the interactivity further with the help of CSS.

How to Code an Overlapping Tabbed Main Menu

Posted on by Sumeet Chawla

Main navigation menu is that part of a website design that makes the whole site look lively and complete. But the most common type of navigation menu style still being used a lot is the tabbed navigation menu. Here is a tutorial on how to code an overlapping tabbed menu.