Web Design

Rounded: Create A Detailed Solid Dark Layout In Photoshop

“In this tutorial you will learn how to create a Solid Dark Layout in Photoshop. A few techniques discussed in this tutorial include the use of proper spacing, typography, and colors…”
check it out

Sketching: the Visual Thinking Power Tool

“When I suggest sketching as a visual thinking tool, I often I hear “I’m not an artist” or “I can’t draw.” While I understand the hesitation, I’m here to tell you that the artistic quality of your sketches is not the point…”
check it out

Tips and Resources to Make You a Better Designer

“The arsenal of a web designer consists mostly of inspiration, creativity, hard work, but at the same time a lot of skillfulness is required as of basic principles of web design, color theory, logo design, and typography…”
check it out

Learn How To Create A Detailed Portfolio Layout In Photoshop

“I really enjoy spending time writing web layout tutorials, as such here comes another one. Are you ready for another PSD web design tutorial here at 1stwebdesigner?…”
check it out

Applying a Clean & Imageless Design to an Article

“In this first installment of a two part tutorial, I would like to show you how to use simple CSS to apply an attractive, well-balanced design to an article…”
check it out

HTML5 logo using CSS3

“As you probably found out, the The World-Wide Web Consortium (W3C) has unveiled the HTML5 Logo…”
check it out

How to create a recipe template in Photoshop

“For today I will show you how to create a nice recipe psd template using some warm colors…”
check it out

Designing a Church Homepage Without the Clutter

“Church home pages tend to suffer from many of the same problems that we recently saw with band websites. There’s so much content that gets thrown onto these pages and it all competes for attention to such a degree that most or all of it loses any intended visual significance…”
check it out

HTML5 Grayscale Image Hover

“Once upon a time, grayscale image has to be manually converted in order to be displayed on the web. Now with HTML5 canvas, images can be manipulated into grayscale without having to use image editing software…”
check it out

Tips for Compromising between Designers and Developers

“In the real world designers and developers are constantly battling it out over projects. Between two lighthearted developers are the crew who simply make website work while designers add flair and vibrant edges…”
check it out

Web Develeopment

Browser Testing: Graceful Degradation

“In this video, you’ll learn about a cross-browser technique called graceful degradation. This concept allows you to utilize the latest standards while continuing to support older browsers…”
check it out

CSS3: box-shadow and inset-shadow

“With the box-shadow property of CSS3, we can add shadows to the different elements on web page, such as div, span or images…”
check it out

CSS Floats Tutorial

“In this 8 minute video, you’ll learn how to use the float property. Floats are often misunderstood, but they’re a very powerful tool for creating page layout…”
check it out

Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3

“This is a run through of the basics of HTML5 and CSS3 while still paying attention to older browsers…”
check it out

Animated CSS3 helix using 3d transforms

“I’m pretty sure you never thought something like that would be possible using pure CSS…”
check it out

Create an Exploding Logo with CSS3 and MooTools or jQuery

“When MooTools contributor and moo4q creator Ryan Florence first showed me his outstanding CSS animation post, I was floored. His exploding text effect is an amazing example of the power of CSS3 and a dash of JavaScript…”
check it out

Use CSS3 to Create a Dynamic Stack of Index Cards

“Recently we hear a lot about CSS3 and its features and even though there are already some web sites out there that take advantage of some of the CSS3 features, we hardly ever see the full potential of what can be achieved with CSS3….”
check it out

How To Create a Cool Animated Menu with jQuery

“In this tutorial we’ll be building a cool navigation list complete with a sliding hover effect. Learn how to build the concept in Photoshop, lay out the basic HTML elements, style everything up in CSS then tie it all together with a few lines of jQuery to create a semantic, accessible and degradable menu design…”
check it out

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

“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…”
check it out

CSS Back To Basics: Terminology Explained

“CSS or Cascading Stylesheets complete the defining language of design rules for our web. Artists everywhere are using CSS on a daily basis to create, organize, and encode sets of rules for basic website layouts…”
check it out

Comment and suggest your favorite Web Design and Web Development articles of the month. Don’t miss a post, subscribe to our RSS feed and follow us on Twitter