I’ve been wanting to get into website design so in order to practice I decided to make mock-up designs in Photoshop and then learn by experience by trying to code them.
Practice is a good way to learn 
However, you do need to understand the basics first so that you can start coding in the correct manner.
One of the hardest concepts that beginners fail to grasp is that a web page is not the same as a printed page and you can’t just stick something here and then something there and expect the rest of the page to avoid it.
In most cases you need to control the flow of the page above all else.
One element should follow another element logically and in the flow of the document so for example if you go back at a later date and change the content in the header then the rest of the page automatically re flows to accommodate.
Use minimal absolute positioning and only use it in controlled situations where you can account for it without upsetting the flow of the document. Most times you will just use static elements and use margins to maintain spacing between them. For horizontal alignment use floats and make sure that they are cleared when you want to regain the flow of the document.
This document flow concept is the most important to grasp because it allows websites to breathe and accommodate changes easily.
Use correct and semantic elements for the job in hand. I navigation is suaually a list so use a ul structure (no need for a div). Headings should be heading elements and paragraphs should be p elements and so on…
Use divs to logically divide a page into sections but as mentioned above don’t over-use them. Only add when needed or to make a layout more robust or to give a logical structure.
If you have a two column layout then create two div containers for each column and then float the whole columns and stack your elements inside. Don’t create multiple left and right elements as that will fail.
Most pages have a defined structure that can bee seen without getting too detailed about it. e.g. Page wrapper, Header, 2 main floated columns and footer. You can create these elements first and then work on the finer detail of the inner elements working from the top of the page and downwards.
Once you’ve practised on a few layouts you will run into most of the issues that you will always come across so try to remember all the bugs and fixes you run into (or write them down to instil them into your brain).
During development validate the css and html at regular intervals and not at the end to weed out any inaccuracies before you build a whole page on something invalid. Also during development get as many browsers as you can locally and check in each as you develop. Don’t wait until the end because that will always result in a shock and then will be too late or too hard to make the changes needed.
