Question

Could someone suggest me any good beginners guide on how to create web pages from scratch (slice a psd) using divs. I have html and css knowledge but have never created any page from scratch in any way div/table/html5

Answer 1

Start by mimicking a simple page. This is called a “cleanroom” exercise, and is great for improving your HTML and CSS skills and actually making it possible to transfer design and layout ideas from your mind into code.

Here’s how you do it:

• Pick a page whose design you like and looks simple enough. For example, the logged out page at flickr.com.
• Take a screenshot of it; do not look at the HTML/CSS code at all
• Create a replica of it using your own HTML and CSS from scratch
• You may use a color picker to find what colors they use
• Try mimicking the fonts and distances manually, without looking at their rules; this will help you get a better understanding of page layout rules and typography rules.
• Make sure your final HTML validates, preferably as XHTML 1.0 Strict (that’s stricter than HTML5 and compatible with HTML5)
• Also validate your CSS
• Using the browser of your choice (e.g. Firefox 4 which is good at rendering things according to standards), check if your result is the same pixel-by-pixel.
• Resize your website and see if it behaves the same as the original.
• Ask a more experienced developer whether your HTML code is semantically correct. This will help you determine whether you’ve used the correct tags for the correct meaning.

This assignment will take you a long time the first time you do it, but if you’re an experienced developer, it won’t usually take more than a couple of minutes or up to an hour per page. It may become frustrating at times, but it’s a great way to improve your skills. While doing it, make sure you look at references such as http://www.htmldog.com/ for the HTML/CSS language syntax.