Web Template Generator - Build Custom CSS and HTML Templates Online for Free

What is the Web Template Generator and why should I use it?

100% FREE

but if you find this site useful,
feel free to buy me a beer!

The Web Template Generator is an easy way to quickly generate a valid HTML and CSS prototype for your website. And best of all - it's free! This tool is intended for users who already have a basic understanding of HTML tags and CSS attributes. It is not a WYSIWYG editor.

Why should you use the Web Template Generator?

Quick and easy custom web templates
Valid HTML and CSS
Well-formatted, easy-to-read code
Implements web development best practices (so you don't have to remember them)
It's FREE!

Learn more about the Web Template Generator Hide

General Template Settings

These settings/styles apply to the entire template.

Doc Type
Page Title
Description
Javascript
Include Javascript framework(s)?

JQuery 1.2.6 Prototype 1.6.0.2

YUI 2.5.2 MooTools 1.2

Body Styles

Font
Color:
Margin

Top: px Right: px

Bottom: px Left: px
Padding

Top: px Right: px

Bottom: px Left: px
Background
Color: Use a background image?
Background Image URL
Border
All borders the same?
All Borders: Color:
- Top: Color:
- Right: Color:
- Bottom: Color:
- Left: Color:

Common HTML Elements

CSS Reset
Heading 1
Color:
Heading 2
Color:
Heading 3
Color:
Link
Color:
Visited Link
Color:
Link:Hover
Color:

Preview

Header
Left Col	Main Content	Right Col
Footer

Header Include Header
Footer Include Footer
Columns

Sidebar on

Sidebar Width: px

Left Col Width: px

Right Col Width: px
Layout Width

Width: px

Position:

Width: %
Technique
Create layout using

« Back Next »

Navigation Settings

Top
Include Top Navigation
- # Links
- Style
- Height
- Width
- Align
- Background Color:
- BG:hover Color:
- Link
  Color:
- Link:hover
  Color:
- Padding
  
  Top: px Right: px
  
  Bottom: px Left: px
- Margin
  
  Top: px Right: px
  
  Bottom: px Left: px
- Border
  All borders the same?
  All Borders: Color:
  
  Top: Color:
  
  Right: Color:
  
  Bottom: Color:
  
  Left: Color:
Side Include Side Navigation
Breadcrumb Include Breadcrumb Navigation
Footer Include Footer Navigation

« Back Next »

Header Settings

Width:
Height
Text Align
Margin

Top: px Right: px

Bottom: px Left: px
Padding

Top: px Right: px

Bottom: px Left: px
Background
Color: Use a background image?
Background Image URL
Border
All borders the same?
All Borders: Color:
- Top: Color:
- Right: Color:
- Bottom: Color:
- Left: Color:

Title and Logo

Logo
Use logo image
Logo Image URL

Width px Height px

Use Image Replacement Technique

Note: For the image replacement technique to work, height and width are required and the logo image must not have a transparent background.
Title
Subtitle

« Back Next »

Sidebar Settings

Left Sidebar

Text Align
Font
Color:
Margin

Top: px Right: px

Bottom: px Left: px
Padding

Top: px Right: px

Bottom: px Left: px
Background
Color: Use a background image?
Background Image URL
Border
All borders the same?
All Borders: Color:
- Top: Color:
- Right: Color:
- Bottom: Color:
- Left: Color:

Right Sidebar

Text Align
Font
Color:
Margin

Top: px Right: px

Bottom: px Left: px
Padding

Top: px Right: px

Bottom: px Left: px
Background
Color: Use a background image?
Background Image URL
Border
All borders the same?
All Borders: Color:
- Top: Color:
- Right: Color:
- Bottom: Color:
- Left: Color:

« Back Next »

Main Content Area Settings

Text Align
Font
Color:
Margin

Top: px Right: px

Bottom: px Left: px
Padding

Top: px Right: px

Bottom: px Left: px
Background
Color: Use a background image?
Background Image URL
Border
All borders the same?
All Borders: Color:
- Top: Color:
- Right: Color:
- Bottom: Color:
- Left: Color:

« Back Next »

Footer Settings

Width:
Height
Text Align
Margin

Top: px Right: px

Bottom: px Left: px
Padding

Top: px Right: px

Bottom: px Left: px
Background
Color: Use a background image?
Background Image URL
Border
All borders the same?
All Borders: Color:
- Top: Color:
- Right: Color:
- Bottom: Color:
- Left: Color:

« Back

General
Layout
Navigation
Header
Sidebar(s)
Main Content
Footer

JQuery 1.2.6	Prototype 1.6.0.2
YUI 2.5.2	MooTools 1.2

Top: px	Right: px
Bottom: px	Left: px

Top: px	Right: px
Bottom: px	Left: px

Top: px	Right: px
Bottom: px	Left: px

General Template Settings

Body Styles

Common HTML Elements

Layout Settings

Preview

Navigation Settings

Header Settings

Title and Logo

Sidebar Settings

Left Sidebar

Right Sidebar

Main Content Area Settings

Footer Settings