views:

72

answers:

4

I am starting design work of my first website. I know very little HTML. I don't know CSS and I am going to learn and use simultaneously.

I want to know whether there is any tutorial on how to create a layout for any website. Any tips or best practices to be followed before designing starts?

+3  A: 

You might find some nice layouts at CSS Zen Garden. There are some existing systems, such as Blueprint and 960, that you might find interesting as well.

bebraw
Sunny
+1  A: 

Ambitious goal. :) When I first designed a website, I found the tutorials on W3C Schools to be very useful.

I would stick to simplicity as much as possible, so you do not have to do too many hacks to make it look uniform across browsers.

This site looks promising as far as layouts are concerned.

For overall good design principles check out Smashing Magazine's article on this.

If you want to go fancy with the look you can find inspiration on Best Web Gallery.

Good Luck!

c_maker
A: 

W3 Schools is a very good source of information regarding tutorials in CSS and HTML and XML. I would recommend that. Also using Zen garden stated previously is a good tool in design. You can also download free templates online but you need to know the code to tweak it and adjust when adding more pages. When designing it is always a good idea to draw it out also and look at some examples.

http://www.webpagesthatsuck.com/biggest-mistakes-in-web-design-1995-2015.html

Sean
A: 

When I started learning (really) CSS, I started by looking into PositionIsEverything.com, here is the best one, I learned most of what I know from it: http://www.positioniseverything.net/articles/onetruelayout/

I also see this one now, which seems to be quite good: http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts

I also strongly recommend reading all articles in this site: http://www.quirksmode.org/ (and the first one... http://www.positioniseverything.net/ ). These are very classic - they will teach you the theory and the hacks you need to know. Fortunatelly for you, IE6 is dead now, so you need to learn much less.

I can also recommend you to install Opera, Chrome (I will not even mention Firefox, if you don't use it you should really go find yourself a new job). Those browsers will give you an impression of what other users use. Safari is also a good idea, yes, it uses the same HTML engine as Chrome (WebKit) but it uses a different toolkit so the site will look differently. Don't forget to install firebug in Firefox, you don't know what you are missing after you have seen it in action.

My next step, was to learn the meta-themes in Drupal, the DIV and classes heirarchy and eventually I learned not to write my own "skeleton" but base myself on meta themes of Drupal. People here linked to skeleton HTML pages, use them and hack only CSS (colors, and sizes). This way you don't have to waste time on overcoming bugs of other browsers.

elcuco