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

40 Awesome Illustrator Tutorials

1

In this roundup we have showcased some of the creative illustrator tutorials from 2011. These include typography, character design, poster design, logo design, portrait design and many more. Enjoy!!

Artistic Printing Inspiration in Illustrator and Photoshop

Create a Lava Island Scenario in Illustrator

How To Create a Slick Navigation Bar In Adobe Fireworks

fireworks-nav-bar-preview

I love Photoshop. I guess we all do. But I believe Fireworks is better suited for web-design work and I usually prefer it over Photoshop. After all Fireworks was created with web-designers in mind and it allows us to quickly prototype and design for the web, so let’s see what it can do.

I’ve created this simple yet modern navigation bar in Fireworks, and I’ll walk you through the steps necessary to create something like that. In the event there are some windows and panels you don’t see opened on your computer, simply go to the ‘Windows‘ menu and open them.

7 PHP Development Techniques to Minimize Security Vulnerabilities

php-secutity-preview

All PHP developers working with user-based content face similar challenges with security. What methods to take, how to avoid certain vulnerabilities, all these elements resulted in innovation of new security methods and techniques designed to fight against unintended loopholes in their code.

While sometimes remembering the basics can help, we discuss several different techniques to minimize security vulnerabilities that may arise otherwise.

How To Design A Gorgeous Big UI Button In Photoshop

big-ui-btn-preview

In this tutorial we’re going to be creating a gorgeous and modern user interface button suitable for the web or a mobile interface design. We’ll be using a handful of Photoshop techniques that are bound to come in handy for more than just creating buttons; in fact, the techniques we’ll be using are often used in most UI elements.

Create a new Photoshop document (I’ve used a 1000×1000 pixel RGB 72dpi document for this tutorial – keep in mind this will need to be a high resolution if you’re designing for a mobile device with a high resolution display such as an iPhone 4). Fill your background layer with a color of your choice, I used this lovely mid-blue color.

How to Create an Awesome Retro VW Beetle Vector in Illustrator

vw-beetle-preview

In this tutorial we’ll be using Adobe Illustrator (CS4 in this case, although can be completed using most versions of Illustrator) to create a vector image of an original Volkswagen (VW) Beetle. We will be making use of one of Illustrators most-used tools; the Pen Tool, as well as adding some finishing touches using a graphics tablet (an affordable Wacom Bamboo tablet in my case) to give the vector a nice hand-drawn style.

If you like this tutorial, keep your eyes peeled for the follow-up tutorial, in which we’ll be using our vectored VW Beetle to create a lovely retro and textured poster in Adobe Photoshop.

Brilliante Blog Layout – Coding The PSD File Into CSS and HTML

tutorial_presentation

In this tutorial, we’ll be revisiting the Brillante blog design, covering the PSD slicing, HTML/CSS coding, custom fonts embedding and some handy cool tips to improve your website performance.

This is Part 2 of 3 of the Photoshop blog design called Brilliante, published some time ago on SpyreStudios and designed by Mahmoud Khaled Deiab.

In this second part, I’m gonna walk you through the PSD to HTML/CSS coding process. Third part will be about creating a WordPress theme. Let’s begin!