Flickr-Style Dynamic Edit Fields with jQuery and CSS3

flickr-style-edit-fields-preview

The typical Flickr interface design includes a lot of Ajax panels which you can edit right from any settings page. Their website layout incorporates many web 2.0 trends as you move from account settings to photo settings and uploads. There are plenty of resources we could look at, and in this tutorial I’d like to […]

Coding a Minimalist Contact Form with CAPTCHA Spam Protection

minimalist-captcha-contact-form-preview

Website contact forms are almost a staple of the modern day Internet. Most company websites will have a small contact form where visitors can share their thoughts or suggestions to the webmaster. But there are also so many bots available that these forms can become plagued with spam. To counter this we need to setup […]

How to use Custom UIButton Graphics for iPhone Applications

cloudy-ui-graphics-psd

Anyone familiar with Xcode will likely understand the breadth and depth of the Cocoa Touch library. This mobile development suite includes pre-built components for all of the native iOS functionality such as input fields, switches, sliders, and definitely buttons.

Featured Image: Xcode custom buttons for iPhone apps

In this tutorial I’d like to show you a simple way to implement your own custom button graphics. I’ll be using the latest Xcode 4.2 release and building an application in iOS5. You do not need to understand Objective-C but it certainly doesn’t hurt the process. When building iPhone apps you’ll eventually have to deal with code so Objective-C should be something to embrace!

How to Design a Dribbble-Style Homepage Layout

dribbble-home-page-layout

The popular design network Dribbble has grown substantially in just a few short years. Graphics designers and illustrators from all over the world have flocked onto the web seeking invites. But aside from the exclusivity their layout design has become a prominent factor of the entire branding.

I love the simplistic nature of their gallery-style photo boxes. It matches well with a community of designers excited to share their latest pixels with the world. In this tutorial I’ll go over techniques for constructing a similar design in HTML5 and CSS3. You can build a very similar page structure with just bare-bones essential CSS. Yet when we can utilize new browser-supported properties like box shadows the process becomes much more captivating.

Dribbble home page design layout

Live DemoDownload Source Code

Design a Foursquare-like User Profile Page in HTML5/CSS3

01-mysquare-demo-screen

Social networking apps have become all the rage, especially with mobile users. You can’t search on Twitter or any corner of the web without finding some reference to checkin apps. The two industry giants are Foursquare and Gowalla which have both been online for just a few years. They feature many similar functions such as user checkins, badges, and friend feeds.

I’ll be demonstrating how to code a simple profile page similar to that of Foursquare. Their design is very simplistic with a 2-column layout split. We’ll be coding this page in HTML5 and CSS3, so I’ll be sure to introduce some of the newer techniques. Additionally I’ve offered the source code for free along with a live demo which you can check out below.

MySquare - Demo HTML5/CSS3 Profile Page

Live DemoDownload

30 Must See HTML5 Tutorials

1

HTML5 and CSS3 Expanded the possibilities of Web Design.There are lots of designers and developers who started practicing HTML5 and also started implementing them in their web designs. In this roundup we have featured 30 useful HTML5 tutorials that will definitely help developers increase their skills..

Making a Beautiful HTML5 Portfolio