There are few shortcuts in life, except when it comes to creating a website. To skip all the knowledge and technical know-how required to manually set up a website, we bring you shortcut #1Free Web Hosting and shortcut #2 Free CSS Web Templates. Using these two components will save you a lot of time scratching your head, ultimately resulting in a website with a proper domain name and a proper web design.
Free Web Hosting
No joke. You can get free web hosting. If you need to get your site up now and have no money left to spend on your web projects, this may be a good option. The web host pays for the service by putting ads on your site. While this will get you up and running, it is disadvantageous in that in addition to having to advertise for the web host, you may have severe limitations with respect to bandwidth and disk space.
Almost Free Web Hosting
Almost free web hosting is a nice medium. You can get web hosting services for only a few dollars a month, without any ads from the host service on your site. There will still be some limitations on disk space and bandwidth, but an almost free web hosting arrangement is definitely enough to get you started until you are ready to upgrade. Also known as cheap web hosting or shared web hosting, this hosting type is indeed perfect for the beginner webmaster or hobbyist. You will hence share server disk space and bandwidth with other hosting clients but as long as your website isn’t heavy with loads of traffic and large files, there shouldn’t be a problem.
Free CSS Web Templates
Now in most hosting packages nowadays clients are offered in-house applications to install CMS, blogs, forums or other website-types so that the client won’t have to. Pre-installable Wordpress blogs are common as is Mambo, Joomla and PHP Nuke. However, these solutions still require knowledge in the scripting language PHP and some level of experience. If you are a first-timer you should keep to basic html and css.
One index.html-file, one image directory, one css stylesheet. Css web templates are built in basic html and css, though not limiting the web design in any way and are failry easy to manage and edit. Online you’ll find massive archives of free css web templates of just a couple of files that you can upload to your shared server. You’ll have to edit your website’s content directly in the html-files but that way you’ll also learn some basic programming. When you later feel ready to create a more dynamic website like a content management system, you will be more ready to take on the world of PHP programming and finding free CMS templates.
One of the first things you should think of when starting the development of a new fresh website, is what colors you want to use. Many people don’t think of this as that important, but it is! According to studies, the right combination of colors is very important to grab your visitors interest. Luckily, Adobe has created a great tool for making this easier for us, it’s called Adobe Kuler.
With Adobe Kuler you have several ways to find the right colors for your website. You can simply log in to the Adobe Kuler website and browse your way to find a nice colorschema.
As you can see from the screenshot, there is many existing schemas that is free for you to download.
If you already have a picture that is going to be central on your website, you can upload the photo, and Adobe Kuler will extract central colors and make a color schema from it, pretty neat!
I recommend you to try Adobe Kuler. It’s a great tool for choosing colors for your website.
What about spicing up your website with some Web 2.0 design? Web 2.0 styles have been very popular in the last couple of years, and thus, many online generators have been made. If you’re looking for web 2.0 buttons, badges, logos or backgrounds, there is a free online generator waiting for you!
Good page design isn’t just about shiny buttons, polished reflections and subtle gradients. An understanding of web typography is essential if your site is to be more than mere eye candy.
Typography is about more than just choosing the right fonts for your design. Think of it as encompassing everything on your page even remotely to do with text on your page. This includes the way it looks, the space around it, how it relates to neighbouring text, line-spacing, proportional sizes, leading, kerning - the list goes on. And since a good website is nothing without content, the typography is as important part of the overall design as any other.
Font choice is an obvious place to start. There is no right or wrong when it comes to the individual fonts, but keep in mind that any text rendered as HTML needs to be a standard web font, so make sure any graphical headings work well alongside the HTML text. Limit yourself to no more than tow or three font styles on a page, with each having a distinct purpose (section headings, pull-out quotes, etc). The same applies to font sizes. This not only makes the page look neater and clearer to read, but can also cut down the amount of CSS styles needed when you construct the HTML.
White space (or negative space) is the space between elements on the page, and is one of the most important typographic tools at your disposal. It allows you to draw the reader’s focus to important text, emphasise content and improve readability. Unfortunately it remains one of the most misunderstood by clients, who frequently try to fill dead space, resulting in cluttered-looking pages.
Line length is also key in creating a clean, readable layout. Studies have found that participants read varying line lengths at similar speeds, but expressed a preference for lenghts of around four to six inches (or 10-15 words). This fits the natural arc of the eye, meaning it has to travel less, thus the visitor can give their full concentration to our carefully crafted page content.
![[Facebook]](http://www.csstemplatesweb.com/wp-content/plugins/bookmarkify/facebook.png)
![[Google]](http://www.csstemplatesweb.com/wp-content/plugins/bookmarkify/google.png)
![[MySpace]](http://www.csstemplatesweb.com/wp-content/plugins/bookmarkify/myspace.png)
![[Reddit]](http://www.csstemplatesweb.com/wp-content/plugins/bookmarkify/reddit.png)
![[StumbleUpon]](http://www.csstemplatesweb.com/wp-content/plugins/bookmarkify/stumbleupon.png)
![[Technorati]](http://www.csstemplatesweb.com/wp-content/plugins/bookmarkify/technorati.png)
![[Windows Live]](http://www.csstemplatesweb.com/wp-content/plugins/bookmarkify/windowslive.png)
![[Yahoo!]](http://www.csstemplatesweb.com/wp-content/plugins/bookmarkify/yahoo.png)
