Web Design from Scratch

Web design is a complex discipline that involves a wide range of skills. I notice that some of the most basic skills are lacking in many web site designs. Those basic skills are quite simple, but can be hard to gain because of a lack of teaching material. That’s what WDFS aims to solve! Designing effective web sites requires having a firm understanding of design fundamentals, and applying them with an eye for simplicity. The simple approach doesn’t make sites boring or plain! On the contrary, well-designed sites can be beautiful, and fulfilling and enjoyable to use. ‘Web Design from Scratch’ describes my approach to simple web design.

Visit Web Design from Scratch

Input Forms Without Tables

Tutorial by Nick Rigby, A List Apart

“It can be time consuming to make web forms both pretty and accessible. In particular, laying out forms where the form label and input are horizontally adjacent, as in the image below, can be a real problem. We used to use tables, which worked well in this scenario—but forms don’t constitute tabular data, so it’s a semantic faux pas.

I’ve tried to create a form-styling solution that is both accessible and portable (in the sense that I can move the code from one project to the next). Floats have often provided a solution to my problem, but given the complexity of some layouts and the numerous float bugs associated with Internet Explorer, it’s not always easy to reuse a float solution. I wanted to create something that anyone could easily reuse on any project: a style sheet that, when applied to a correctly marked up HTML form, would produce the basis of the required layout. So here it is—my attempt at portable, accessible forms.”

Read the Tutorial

COLOURlovers Allows Creative Individuals to Share Colours & Palettes They Love

COLOURlovers™ is a resource that monitors and influences color trends. COLOURlovers gives the people who use color - whether for ad campaigns, product design, or even in architectural specification - a place to check out a world of color, compare color palettes, submit news and comments, and read color related articles and interviews. The COLOURlovers™ community is regularly updated with information and examples of the way colors are used in the real world—along with news articles on color trends and interviews with top creative professionals. Here everyone who is interested in the practical applications of color can find an index of color trends as they are happening.

Visit COLOURlovers

CSS Layout Generator

The layout generated has changed significantly from previous versions. The main reason for change was to simplify the layout and in doing so make it easier to use. It no longer provides fixed width columns with fluid center or full length columns by default.  This generator will create a fluid or fixed width floated column layout, with up to 3 columns and with header and footer. Values can be specified in either pixels, ems or percentages.  Links to articles in the “Layout Hints” box to the right and the CSS Forum will provide help where needed. The generator requires a DOM capable browser with JavaScript enabled.

Launch the CSS Generator

70 Expert Ideas For Better CSS Coding

Tutorial by Smashing Magazine
CSS isn’t always easy to deal with. Depending on your skills and your experience, CSS coding can sometimes become a nightmare, particularly if you aren’t sure which selectors are actually being applied to document elements. An easy way to minimize the complexity of the code is as useful as not-so-well-known CSS attributes and properties you can use to create a semantically correct markup.

We’ve taken a close look at some of the most interesting and useful CSS tricks, tips, ideas, methods, techniques and coding solutions and listed them below. We also included some basic techniques you can probably use in every project you are developing, but which are hard to find once you need them.

Read the Tutorial