Web Designer's Killer Handbook™
About this document
There are plenty of books and websites that give you detailed instructions on HTML, JavaScript and Cascading Style Sheets.
The Web Designer's Killer Handbook is not intended to teach total beginners how to use each of these key technologies; rather the goal is to filter out some of the more useful techniques and code that I have found throughout the years when creating websites and web applications.
The motivation
In the past I would often find myself on a project trying to remember how I had done something before. The motivation here is to provide a 'to the point' document of useful tips and code snippets. As it is a useful collection of tips and code for me, I hope it will be to you.
A work in progress
This 'book' is a work in progress; new items will be added as time permits and as new ideas come about. My focus for now will be on what are the 'client side' technologies; those technologies that work directly in the browser rather than on the server.
They include HTML, CSS (Cascading Style Sheets) and JavaScript. Later I will delve into other technologies that are web related, technologies like FLASH, PHP, JSP, ASP come to mind. If you have any questions, comments, or you spot any mistakes please send me an email!
The content
Most of the code is my own, although that is not saying much since much of it is pretty simple to begin with. There are some widgets that I have borrowed from others (like some complex JavaScript code) and the authors name will be credited properly.
As I mentioned before, this is a work in progress. You can expect this 'book' to grow in time. Yet, I am not interested in putting together a bloated document that is full of filler. I want to create something that is functional for the reader, something that they can use to quickly find that useful snippet of code that does what they need.
The idea I have is that my years of being a web designer and programmer will allow me to be selective when sampling from the sea of information available on the subject!
How to use the book
For those of you who may find some of the contents confusing, I would suggest that you simply begin by playing around with the code and see how it looks/works in your web browser.
The easiest way to do this is to create a practice HTML page where you can cut and paste the code and then make small changes to it to see how it affects things. Breaking the code snippets and then seeing how you broke it will go along way to teaching you what is happening.
If you are wondering why you should bother to learn a little bit about the code behind the web pages, please take a look at this article.
To create the practice HTML page do the following
1. Go to your desktop and create a simple text document. On Windows all you need to do is right-click and select: New -> text Document
That will create a simple blank text document on your desktop. Name the file: practiceHTML.htm.
Windows will show you a warning asking you if you want to change the file extension, just say yes. Now right click on the file and select: 'open with' and select notepad.
Once inside notepad, paste in the template code found in the box below:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>My Practice HTML Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
</body>
</html>
This code forms the basic structure for all HTML pages. You can now cut and paste* the code samples in between these tags:
<body> <!--Insert code here! --> </body>
One last note: in between the <body> </body> you find what is called a comment. Comments are a way to place notes that cannot be seen in the browser. Anything in between the following characters becomes an HTML comment:
<!-- and -->
Anything inside comments will be invisible in the browser. So in the above example the word 'and' would be invisible in the browser - comments are a good way to leave messages about what your are doing in the page.
It can come in handy later on when someone else is working on the page or even when you are, because you may forget why you did things a certain way.
A simple way to cut/paste text in Windows is to press and hold the Ctrl key and 'c' for copy and 'v' for paste.
CONTINUE: STYLING YOUR PAGES
Top