Developing a website can leave you with headache after headache. But if you follow a few easy to remember tips then you can reduce the frequency and pain of those headaches!
Tip #1: Close ‘em up!
This is by far the best and most simple trick that I use to make sure I don’t make those “what the heck is going wrong, my code looks fine” problems. Here’s what you need to do: Whenever you open a tag, then the very next thing to do is close it. I bet you’re saying, “DUH, everyone knows that there has to be a starting and ending tag!” You are correct! However, it is extremely easy to forget a </div> if it’s not immediately preceded by a <div>. That’s why, before typing any content after an opening tag, I always put my ending tag first… then you can click in between the tags and put your content. This isn’t just for html either, in css you should always set the rule up in it’s entirety before putting the properties inside.
Tip #2: Keep it legible!
This is an easy way to make troubleshooting much less painful. If something isn’t rendering like it should in your website and your code looks like this:
<h1>heading 1</h1><p> </p><p> </p><h1><span></span></h1> <table width=”100%” border=”0″ cellpadding=”2″><tr valign=”top”><td width=”18%” scope=”col”><a href=”#”><img src=”images.jpg” alt=”image” width=”100″ height=”100″ border=”0″ /></a></td><td width=”32%” scope=”col”><span><a href=”#”>image</a>,<br /></span><td scope=”col”><a href=”#”><img src=”images.jpg” alt=”image” width=”100″ height=”100″ border=”0″ /></a></td><td scope=”col”><a href=”#”></a></td></table>
…then finding out what is causing the problem is about the equivalent of punching yourself in the face in order to get the speck out of your eye. Magical tip #2 is to break up your code with spaces, indent nested elements, and use code comments frequently and purposefully. Try and find out what the problem was with the above code, time yourself, then try to find out what the problem is with the following code. See if the time it takes is any faster. (“—–” indicates indentation)
<div id=”container”>
—– <div id=”header”>
—– —– <h1>my header</h1>
—– —– <p>a paragraph</p>
—– —– <ul>
—– —– —– <li>Item 1</li>
—– —– —– <li>Item 2</li>
—– </div> <!– header –>
</div> <!– container –>
Chances are you spent about 4 seconds on the first code, got bored, and moved on. You then probably took about 4 seconds on the next code, realized the <ul> has no ending tag, and merrily went about your day. By the way, if you were wondering, the first code is missing a </td> somewhere in the middle there. If you found that then, congratulations! You’re a nerd!
Tip #3: Organize and explain!
This tip becomes more and more important the larger and more complex your pages get. When you have a css file with somewhere nearing 100 rules scattered all over it becomes quite a nuisance when you want to change a certain class property. Make it easier on yourself with code comments!
/* ————- GENERAL RULES —————-*/
body {
font-family: sans-serif;
background: #000;
}
/* ——————NAVIGATION ——————*/
ul.nav {
list-style-type: none;
float: right;
}
ul.nav li {
color: #FFF;
}
Now instead of scrolling through your css file looking for “ul.nav” you can ease the pain by knowing its under the comment “NAVIGATION” which comes after “GENERAL RULES”. Notice also how the order seems to be broad to specific, that should be a goal in your organizing process.
Tip #4: Validate, validate, validate!
The w3c has made it quite easy to find those well hidden and subtle errors that are messing with your mind. There is a tool that they created that will read through your code and highlight those errors, where they are, and what makes them errors. You have to use this tool it is free and will help you produce clean and logical code.
Go there now! http://validator.w3.org/
Here’s how to use the tool:
- Three options: type the URL of the page you want to validate OR upload a file OR type out the code directly into the tool
- Click on “More Options”
- Check the box for “Show Source”
- Click the button “Check”
The tool will spit out how many errors and warnings at the top of the page. Scroll down to see detailed reports on each error. Scroll even further to see an imported version of your source code.
Tip #5: Ask the almighty Internet!
Google can pretty much answer any question you might have. Chances are the problem you are facing in your code has already been addressed somewhere. That is one major plus to this field of work, you don’t have to reinvent the wheel. People are much more generous than you may think. They have worked hard and long coming up with a solution to your problem and are willing to freely give that information away. And if you just so happen to have money lying around then you also have access to the hundreds of online tutorials and schools created and run by professionals and experts. A great site that I use is lynda.com.
the end.
