When creating/designing a web page, we either start with the HTML, build the structure and style it later or style-while-structuring.

If you design with the 1st approach and bored of creating a CSS file with copy-pasting all those class + id names, here is a quick solution:

Bear CSS is a free-to-use web application that generates a stylesheet with all the elements, ids and classes from a given HTML file.

The app is mostly useful for projects with a pretty long HTML and it would be better if Bear CSS had asked which items to include inside the stylesheet just after the upload -feature request : )-.

When designing websites, images-to-be-used usually doesn't exist at first as it is the layout that matters the most.

However, the sizes for the images are usually pre-set and inserting some placeholder images help us better seeing/analyzing the layout.

Rather than creating these placeholder images manually, there are free to use services which can automate the process and save us time.

Here is a list of 8 free placeholder image services for instant dummy images:

Flickholdr

As the name tells it, Flickrholdr fetches images from the huge database of Flickr.

Besides the size of the images, it is possible to mention tags in the URL which is great for using related images in each spot.

Placehold.it

The service is full-featured with the ability to mention sizes, image format (.gif, .jpg, .png) and can also display text.

The size of the images generated are displayed on them as well.

Read the rest of this entry »

There are various CSS frameworks which offer a grid system, a style reset, basic typography, form styling & more.

But, if you only need a lightweight grid framework to build the skeleton of your website, take a look at the 1Kb CSS Grid.

It supports both fluid grids besides the fixed-width ones and nested rows can be created.

The website of the framework provides a generator to customize the grid & download the CSS easily.

Also, Usability Post has a very detailed introduction to the 1Kb CSS Grid in 3 steps. To dig the details, make sure you check them:

• Introduction
• Using The Grid For Templating
• The Details (nested rows, fluid grids..)

Grid System Generator is a website that asks for grid width, number of columns, margin-left/right & creates a fixed grid system with valid xhtml/css.

Besides the CSS framework, a .PNG background file is created as well to help in prototyping and design.

The generator is based on 960.gs & displays already created grids which can be found here.

You can also find instructions on using the generator & links to resources about grid systems.

P.S. Another 960.gs based grid generator can be found here.

Sample / test data is an effective way to test web projects & applications. Other than meaningless data, real names, addresses, zip codes can make the whole testing stage easier.

WebResourcesDepot have collected some nice free test data generators which you may find useful:

GenerateData

GenerateData is a free, open source script written in JavaScript, PHP and MySQL that lets you quickly generate large volumes of custom data in a variety of formats for use in testing software, populating databases.

Some features:

• (JS-enabled) browser-friendly.
• Many data types available: names, phone numbers, email addresses, cities, states, provinces, counties, dates, street addresses, number ranges, alphanumeric strings, lorem ipsum text and more.
• Option to generate data in XML, Excel, HTML, CSV or SQL.
• Country specific data (state / province / county) for Canada, US, Netherlands and UK.

DBMonster

DBMonster is a tool that generates random test data and inserts it into SQL database.

CSV Data Generator

This is a Ruby based free test data generator.

Datagenerator

Datagenerator is a library and GUI for generating rule based test data for various databases like Mysql, Firebird, Interbase, MSSQL, Oracle, SQLite and PostgreSQL.

dgMaster

Data generator tool which supports many data types (primitive data types,but also names,addresses,post codes,etc.) and generates data in various formats (text,xml,db).It provides a GUI and is extensible by means of plugging-in new data-generator classes.

Spawner Data Generator

Spawner is a generator of sample/test data for databases. It can be configured to output delimited text or SQL insert statements. It can also insert directly into a MySQL 5.x database. Includes many field types, most of which are configurable.

Test Dictionary

A Java interface that quickly returns random proper names, terms and connectors. Useful for populating realistic test data.

Fresh Trash Generator

This is a Java utility package for generate random test data.

Site visitors, sometimes, have a different route of browsing a website rather than expected. Or, they may not have enough time to see what the website owner expects to be seen in a website.

In these circumstances, site tours can be very helpful for showing a website how you want them to see.

Amberjack, which is an open source website tour generation library, enables web developers to create nice looking site tours so easily.

How to use Amberjack?

Amberjack has a site tour generation wizard which creates the sample code that must be installed. After inserting that code into your site’s HTML template, right before the </body> tag, and filling the information that will be shown in every page, you’re done.

This way the Amberjack javascript files are hosted on the Amberjack server. But javascript files can also be uploaded and called from your website.

There are already some skins for the site tour info box but it is possible to update them with some css editing.

Website Contact Form Generator utility enables you to create form-to-email scripts for your ASP, PHP or Perl web site with no programming skills needed.

It is possible to define all variables of a contact form including input types, javascript validations, subject & to-from addresses of the e-mail that will be sent when the contact form is filled.