Create a Responsive Portfolio using Twitter Bootstrap

Responsive Portfolio with Twitter BootStrap

Bootstrap is a frontend framework developed by Twitter for design purposes. Apart from being responsive, it has got different components ranging from grid systems to icons set and hence surely lead the all the other frameworks. Bootstrap is open source and is the most popular repository on GitHub.

Today we will make a responsive portfolio using Bootstrap while taking care that it renders smoothly on tablet and mobile devices too. The working demo of this tutorial can be found here.

Getting Bootstrap

Bootstrap can be downloaded or compiled to your needs from their ‘Getting Started‘ page but I would prefer using the CDN option, because it’s faster. Also, it is advised to go through the page and get yourself accustomed with some bootstrap terms, including common classes. This page also has some examples of how to use Bootstrap classes. Be sure to check them out. Observe the responsiveness by shortening your browser at various widths and noticing the difference (don’t be lazy, do that). See how the rendering differs at different widths.Continue Reading

Creating a Stitched Ribbon Banner with CSS3

Stitched Ribbon with CSS3 - No Images

In this tutorial we will learn how to create a Stitched Ribbon banner using CSS3 techniques.  We will achieve the banner effect without using any images.  Before CSS3 the only way to create a banner effect was to use images.

This is what we will be creating

Stitched Ribbon with CSS3 - No Images

Continue Reading

Create Social Buttons using CSS3 and Icon set

Social websites such as Facebook, Twitter, Google+ and others play an important role in marketing and publicity. Providing a social widget simplifies the task for the users visiting the page to share, like or rate your content, therefore helping in publicizing the same.

You have the option of using either standard social widgets or create your own social buttons using social icons on your website. However, icons are preferable as they can be customized to fit, unlike social widgets which have a standard look and dimensions, which makes them look common. We will make a simple set buttons (which can definitely be improved upon) which look like the following.Continue Reading

Create BreadCrumb Navigation with CSS3

CSS3-BreadCrumbs Final

In this post we will create a simple breadcrumb navigation using CSS3.  Earlier creation a breadcrumb navigation required the use of images but with advances in CSS it is now possible to achieve the same effect without using any images at all.

Here is what we will be creating in this tutorial.

CSS3-BreadCrumbs Final

Continue Reading