30 HTML Best Practices for Beginners – Basix

May 14th, 2009 in HTML & CSS by Jeffrey Way

The most difficult aspect of running Nettuts+ is accounting for so many different skill levels. If we post too many advanced tutorials, our beginner audience won't benefit. The same holds true for the opposite. We do our best, but always feel free to pipe in if you feel you're being neglected. This site is for you, so speak up! With that said, today's tutorial is specifically for those who are just diving into web development. If you've one year of experience or less, hopefully some of the tips listed here will help you to become better, quicker!

Without further ado, let's review thirty best practices to observe when creating your markup.

Author: Jeffrey Way

Hi, I'm Jeff. I'm the editor of Nettuts+, and the Site Manager of both ThemeForest, and CodeCanyon. I spend too much time in front of the computer and find myself telling my fiance', "We'll go in 5 minutes!" far too often. I just can't go out to dinner while I'm still producing FireBug errors...drives me crazy. During my free time, I sporadically write articles for my own personal blog. If it will keep you in the good graces of the church, follow us on Twitter.

1: Always Close Your Tags

Back in the day, it wasn't uncommon to see things like this:

<li>Some text here.
<li>Some new text here.
<li>You get the idea.

Notice how the wrapping UL/OL tag was omitted. Additionally, many chose to leave off the closing LI tags as well. By today's standards, this is simply bad practice and should be 100% avoided. Always, always close your tags. Otherwise, you'll encounter validation and glitch issues at every turn.

Better

<ul>
  <li>Some text here. </li>
  <li>Some new text here. </li>
  <li>You get the idea. </li>
</ul>

2: Declare the Correct DocType

When I was younger, I participated quite a bit in CSS forums. Whenever a user had an issue, before we would look at their situation, they HAD to perform two things first:

Validate the CSS file. Fix any necessary errors.
Add a doctype.

"The DOCTYPE goes before the opening html tag at the top of the page and tells the browser whether the page contains HTML, XHTML, or a mix of both, so that it can correctly interpret the markup."

Most of us choose between four different doctypes when creating new websites.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

There's a big debate currently going on about the correct choice here. At one point, it was considered to be best practice to use the XHTML Strict version. However, after some research, it was realized that most browsers revert back to regular HTML when interpretting it. For that reason, many have chosen to use HTML 4.01 Strict instead. The bottom line is that any of these will keep you in check. Do some research and make up your own mind.

3: Never Use Inline Styles

When you're hard at work on your markup, sometimes it can be tempting to take the easy route and sneak in a bit of styling.

<p style="color: red;">I'm going to make this text red so that it really stands out and makes people take notice! </p>

Sure -- it looks harmless enough. However, this points to an error in your coding practices.

When creating your markup, don't even think about the styling yet. You only begin adding styles once the page has been completely coded.

It's like crossing the streams in Ghostbusters. It's just not a good idea.
-Chris Coyier (in reference to something completely unrelated.)

Instead, finish your markup, and then reference that P tag from your external stylesheet.

Better

#someElement > p {
  color: red;
}

4: Place all External CSS Files Within the Head Tag

Technically, you can place stylesheets anywhere you like. However, the HTML specification recommends that they be placed within the document HEAD tag. The primary benefit is that your pages will seemingly load faster.

While researching performance at Yahoo!, we discovered that moving stylesheets to the document HEAD makes pages appear to be loading faster. This is because putting stylesheets in the HEAD allows the page to render progressively.
- ySlow Team

<head>
<title>My Favorites Kinds of Corn</title>
<link rel="stylesheet" type="text/css" media="screen" href="path/to/file.css" />
<link rel="stylesheet" type="text/css" media="screen" href="path/to/anotherFile.css" />
</head>

5: Consider Placing Javascript Files at the Bottom

Remember -- the primary goal is to make the page load as quickly as possible for the user. When loading a script, the browser can't continue on until the entire file has been loaded. Thus, the user will have to wait longer before noticing any progress.

If you have JS files whose only purpose is to add functionality -- for example, after a button is clicked -- go ahead and place those files at the bottom, just before the closing body tag. This is absolutely a best practice.

Better

<p>And now you know my favorite kinds of corn. </p>
<script type="text/javascript" src="path/to/file.js"></script>
<script type="text/javascript" src="path/to/anotherFile.js"></script>
</body>
</html>

6: Never Use Inline Javascript. It's not 1996!

Another common practice years ago was to place JS commands directly within tags. This was very common with simple image galleries. Essentially, a "onclick" attribute was appended to the tag. The value would then be equal to some JS procedure. Needless to say, you should never, ever do this. Instead, transfer this code to an external JS file and use "addEventListener/attachEvent" to "listen" for your desired event. Or, if using a framework like jQuery, just use the "click" method.

$('a#moreCornInfoLink').click(function() {
  alert('Want to learn more about corn?');
});

7: Validate Continuously

I recently blogged about how the idea of validation has been completely misconstrued by those who don't completely understand its purpose. As I mention in the article, "validation should work for you, not against."

However, especially when first getting started, I highly recommend that you download the Web Developer Toolbar and use the "Validate HTML" and "Validate CSS" options continuously. While CSS is a somewhat easy to language to learn, it can also make you tear your hair out. As you'll find, many times, it's your shabby markup that's causing that strange whitespace issue on the page. Validate, validate, validate.

8: Download Firebug

I can't recommend this one enough. Firebug is, without doubt, the best plugin you'll ever use when creating websites. Not only does it provide incredible Javascript debugging, but you'll also learn how to pinpoint which elements are inheriting that extra padding that you were unaware of. Download it!

9: Use Firebug!

From my experiences, many users only take advantage of about 20% of Firebug's capabilities. You're truly doing yourself a disservice. Take a couple hours and scour the web for every worthy tutorial you can find on the subject.

Resources

10: Keep Your Tag Names Lowercase

Technically, you can get away with capitalizing your tag names.

<DIV>
<P>Here's an interesting fact about corn. </P>
</DIV>

Having said that, please don't. It serves no purpose and hurts my eyes -- not to mention the fact that it reminds me of Microsoft Word's html function!

Better

<div>
<p>Here's an interesting fact about corn. </p>
</div>

11: Use H1 - H6 Tags

Admittedly, this is something I tend to slack on. It's best practice to use all six of these tags. If I'm honest, I usually only implement the top four; but I'm working on it! :) For semantic and SEO reasons, force yourself to replace that P tag with an H6 when appropriate.

<h1>This is a really important corn fact! </h1>
<h6>Small, but still significant corn fact goes here. </h6>

12: If Building a Blog, Save the H1 for the Article Title

Just this morning, on Twitter, I asked our followers whether they felt it was smartest to place the H1 tag as the logo, or to instead use it as the article's title. Around 80% of the returned tweets were in favor of the latter method.

As with anything, determine what's best for your own website. However, if building a blog, I'd recommend that you save your H1 tags for your article title. For SEO purposes, this is a better practice - in my opinion.

13: Download ySlow

Especially in the last few years, the Yahoo team has been doing some really great work in our field. Not too long ago, they released an extension for Firebug called ySlow. When activated, it will analyze the given website and return a "report card" of sorts which details the areas where your site needs improvement. It can be a bit harsh, but it's all for the greater good. I highly recommend it.

14: Wrap Navigation with an Unordered List

Each and every website has a navigation section of some sort. While you can definitely get away with formatting it like so:

 <div id="nav">
  <a href="#">Home </a>
   <a href="#">About </a>
   <a href="#">Contact </a>
 </div>

I'd encourage you not to use this method, for semantic reasons. Your job is to write the best possible code that you're capable of.

Why would we style a list of navigation links with anything other than an unordered LIST?

The UL tag is meant to contain a list of items.

Better

<ul id="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
</ul>

15: Learn How to Target IE

You'll undoubtedly find yourself screaming at IE during some point or another. It's actually become a bonding experience for the community. When I read on Twitter how one of my buddies is battling the forces of IE, I just smile and think, "I know how you feel, pal."

The first step, once you've completed your primary CSS file, is to create a unique "ie.css" file. You can then reference it only for IE by using the following code.

<!--[if lt IE 7]>
   <link rel="stylesheet" type="text/css" media="screen" href="path/to/ie.css" />
<![endif]-->

This code says, "If the user's browser is Internet Explorer 6 or lower, import this stylesheet. Otherwise, do nothing." If you need to compensate for IE7 as well, simply replace "lt" with "lte" (less than or equal to).

16: Choose a Great Code Editor

Whether you're on Windows or a Mac, there are plenty of fantastic code editors that will work wonderfully for you. Personally, I have a Mac and PC side-by-side that I use throughout my day. As a result, I've developed a pretty good knowledge of what's available. Here are my top choices/recommendations in order:

Mac Lovers

PC Lovers

17: Once the Website is Complete, Compress!

By zipping your CSS and Javascript files, you can reduce the size of each file by a substantial 25% or so. Please don't bother doing this while still in development. However, once the site is, more-or-less, complete, utilize a few online compression programs to save yourself some bandwidth.

Javascript Compression Services

CSS Compression Services

18: Cut, Cut, Cut

Looking back on my first website, I must have had a SEVERE case of divitis. Your natural instinct is to safely wrap each paragraph with a div, and then wrap it with one more div for good measure. As you'll quickly learn, this is highly inefficient.

Once you've completed your markup, go over it two more times and find ways to reduce the number of elements on the page. Does that UL really need its own wrapping div? I think not.

Just as the key to writing is to "cut, cut, cut," the same holds true for your markup.

19: All Images Require "Alt" Attributes

It's easy to ignore the necessity for alt attributes within image tags. Nevertheless, it's very important, for accessibility and validation reasons, that you take an extra moment to fill these sections in.

Bad

<IMG SRC="cornImage.jpg" />

Better

<img src="cornImage.jpg" alt="A corn field I visited." />

20: Stay up Late

I highly doubt that I'm the only one who, at one point while learning, looked up and realized that I was in a pitch-dark room well into the early, early morning. If you've found yourself in a similar situation, rest assured that you've chosen the right field.

The amazing "AHHA" moments, at least for me, always occur late at night. This was the case when I first began to understand exactly what Javascript closures were. It's a great feeling that you need to experience, if you haven't already.

21: View Source

What better way to learn HTML than to copy your heroes? Initially, we're all copiers! Then slowly, you begin to develop your own styles/methods. So visit the websites of those you respect. How did they code this and that section? Learn and copy from them. We all did it, and you should too. (Don't steal the design; just learn from the coding style.)

Notice any cool Javascript effects that you'd like to learn? It's likely that he's using a plugin to accomplish the effect. View the source and search the HEAD tag for the name of the script. Then Google it and implement it into your own site! Yay.

22: Style ALL Elements

This best practice is especially true when designing for clients. Just because you haven't use a blockquote doesn't mean that the client won't. Never use ordered lists? That doesn't mean he won't! Do yourself a service and create a special page specifically to show off the styling of every element: ul, ol, p, h1-h6, blockquotes, etc.

23: Use Twitter

Lately, I can't turn on the TV without hearing a reference to Twitter; it's really become rather obnoxious. I don't have a desire to listen to Larry King advertise his Twitter account - which we all know he doesn't manually update. Yay for assistants! Also, how many moms signed up for accounts after Oprah's approval? We can only long for the day when it was just a few of us who were aware of the service and its "water cooler" potential.

Initially, the idea behind Twitter was to post "what you were doing." Though this still holds true to a small extent, it's become much more of a networking tool in our industry. If a web dev writer that I admire posts a link to an article he found interesting, you better believe that I'm going to check it out as well - and you should too! This is the reason why sites like Digg are quickly becoming more and more nervous.

If you just signed up, don't forget to follow us: NETTUTS.

24: Learn Photoshop

A recent commenter on Nettuts+ attacked us for posting a few recommendations from Psdtuts+. He argued that Photoshop tutorials have no business on a web development blog. I'm not sure about him, but Photoshop is open pretty much 24/7 on my computer.

In fact, Photoshop may very well become the more important tool you have. Once you've learned HTML and CSS, I would personally recommend that you then learn as many Photoshop techniques as possible.

Visit the Videos section at Psdtuts+
Fork over $25 to sign up for a one-month membership to Lynda.com. Watch every video you can find.
Enjoy the "You Suck at Photoshop" series.
Take a few hours to memorize as many PS keyboard shortcuts as you can.

25: Learn Each HTML Tag

There are literally dozens of HTML tags that you won't come across every day. Nevertheless, that doesn't mean you shouldn't learn them! Are you familiar with the "abbr" tag? What about "cite"? These two alone deserve a spot in your tool-chest. Learn all of them!

By the way, in case you're unfamiliar with the two listed above:

abbr does pretty much what you'd expect. It refers to an abbreviation. "Blvd" could be wrapped in a <abbr> tag because it's an abbreviation for "boulevard".
cite is used to reference the title of some work. For example, if you reference this article on your own blog, you could put "30 HTML Best Practices for Beginners" within a <cite> tag. Note that it shouldn't be used to reference the author of a quote. This is a common misconception.

26: Participate in the Community

Just as sites like ours contributes greatly to further a web developer's knowledge, you should too! Finally figured out how to float your elements correctly? Make a blog posting to teach others how. There will always be those with less experience than you. Not only will you be contributing to the community, but you'll also teach yourself. Ever notice how you don't truly understand something until you're forced to teach it?

27: Use a CSS Reset

This is another area that's been debated to death. CSS resets: to use or not to use; that is the question. If I were to offer my own personal advice, I'd 100% recommend that you create your own reset file. Begin by downloading a popular one, like Eric Meyer's, and then slowly, as you learn more, begin to modify it into your own. If you don't do this, you won't truly understand why your list items are receiving that extra bit of padding when you didn't specify it anywhere in your CSS file. Save yourself the anger and reset everything! This one should get you started.

html, body, div, span, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
img, ins, kbd, q, s, samp,
small, strike, strong, 
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

28: Line 'em Up!

Generally speaking, you should strive to line up your elements as best as possible. Take a look at you favorite designs. Did you notice how each heading, icon, paragraph, and logo lines up with something else on the page? Not doing this is one of the biggest signs of a beginner. Think of it this way: If I ask why you placed an element in that spot, you should be able to give me an exact reason.

29: Slice a PSD

Okay, so you've gained a solid grasp of HTML, CSS, and Photoshop. The next step is to convert your first PSD into a working website. Don't worry; it's not as tough as you might think. I can't think of a better way to put your skills to the test. If you need assistance, review these in depth video tutorials that show you exactly how to get the job done.

30: Don't Use a Framework...Yet

Frameworks, whether they be for Javascript or CSS are fantastic; but please don't use them when first getting started. Though it could be argued that jQuery and Javascript can be learned simultaneously, the same can't be made for CSS. I've personally promoted the 960 CSS Framework, and use it often. Having said that, if you're still in the process of learning CSS -- meaning the first year -- you'll only make yourself more confused if you use one.

CSS frameworks are for experienced developers who want to save themselves a bit of time. They're not for beginners.

Check out some more great tutorials and articles that you might like

24 JavaScript Best Practices for Beginners – Basix JavaScript & AJAX
20+ HTML Forms Best Practices for Beginners – Basix HTML & CSS
30 CSS Best Practices for Beginners – Basix HTML & CSS

Enjoy this Post?

Your vote will help us grow this site and provide even more awesomeness

Plus Members

Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.

Join Now

User Comments

( ADD YOURS )

Tracepoint May 14th

Pretty awesome list; if you haven’t got the fundamentals you haven’t got anything.
( Reply )
Liam McCabe May 14th

Amazing work Jeff!
Great tips!
( Reply )
Jeffrey Way May 14th

Thanks guys. If it helped, please retweet or Digg it. These things take forever!
( Reply )
1. Meshach May 14th
  
  Dugg and retweeted. Thanks for the awesome article Jeffrey!
  ( Reply )
2. kirie May 15th
  
  usefull yes,
  but i think this is not for beginner,
  like validation and reset.css
  will just confusing beginner rather than helping them
  ( Reply )
  1. Jeffrey Way May 15th
    
    Validation is primarily for beginners. They’re the ones who make the most mistakes.
3. Qiming May 16th
  
  Dugg.
  Amazing article, I wish I had this kind of resource when I started a while ago
  ( Reply )
The Captain May 14th

Pretty good! Wish I had this when I first started about two years ago.
I’m still in the habit of doing some bad decisions with coding.
( Reply )
1. sean steezy May 15th
  
  yeah i hear that. as not going to school for this stuff you miss out on the fundamentals
  ( Reply )
Glenn May 14th

Great article! I would have never thought about using h6 tags the way you recommended.
However, I don’t know if compressing files is always a good idea, it sounds like it would make debugging sites and changing your work later a lot more difficult. Most coding projects are never ‘complete’ one day you just stop working on them.
( Reply )
1. patrick May 14th
  
  i have a method that seems to work: i compress my css files, in part because i do consider it a best practice, but also because my css files are chock-full of comments, white space, and indexes (at the beginning). but before i compress the final css files, i copy them as .txt files. when i deploy the site i upload those .txt file(s) outside of the root folder so it (or they) isn’t served. trust me, my css comments are extensive, and i do this for me and for anyone who updates the site in the future. but compression is mandatory in all of my projects.
  ( Reply )
Ray May 14th

Great Tut!
( Reply )
Timothy May 14th

Validity is overrated. For example, if you use target=”_blank” it won’t validate. Which doesn’t make too much sense.
Not to say that you shouldn’t care about the quality of your markup. Unlike most programming languages when you use any code (JS, HTML, etc) on a website browsers do their best to make sense of them. This means that they are generous and will try to make bad code work. So a lot of developers write sloppy, poor code but it works in a handful of browsers. So do make sure that all is well. Validation is a way to prove it, but even if you write everything correctly you may need to use some valid features that will not validate due to poor standards.
( Reply )
1. Shaun May 15th
  
  Actually, it makes lots of sense. Forcing users to open new windows is not only aggravating, but is a big problem for accessibility too.
  I suggest you take a look at this Dive Into Accessibility article: http://diveintoaccessibility.org/day_16_not_opening_new_windows.html
  ( Reply )
2. Matt Hill May 15th
  
  target=”_blank” is perfectly valid if you use the right Doctype. I think what you mean is that it’s not valid for the XHTML Strict Doctype.
  If you need to use target=”_blank”, then simply switch to the transitional Doctype.
  There are no “best” doctypes that people should use, you should just use what’s appropriate for the project. Correct use of the correct tags for a given Doctype will yield correct validation.
  I do agree however that validation in and of itself is not the be-all and end-all of a good website build.
  ( Reply )
Syed Balkhi May 14th

This should be named not just for beginners, but for all webmasters and designers. Very nice article, just dugg and retweeted.
( Reply )
pedropenduko May 14th

Very well done!
( Reply )
Gustavo Barbosa May 14th

Congratulations, this article is great.
( Reply )
Michael May 14th

Fantastic article.
Along with #24, I would add learn about basic visual design principals (color theory, contrast, light and shadow etc.) and how to execute them.
Photoshop is clearly a must, especially if you are a solo freelancer.
Personally, I took a weird learning route: Flash–>Photoshop–>HTML–>CSS
( Reply )
Tracepoint May 14th

Timothy,
You’re not wrong but you agree that you need to know the rules and know them well before you know when it is appropriate to break them?
( Reply )
saurabh shah May 14th

this is an amazing post jeff ! thanx for sharing it …
( Reply )
Nikhil May 14th

Great Post,
Every point is notable and excellent.
( Reply )
Troy May 14th

Great article!
One thing that you should add as well is to include title tags on all links, especially image based links, for SEO purposes.
( Reply )
1. Troy May 14th
  
  Sorry… missed it.
  You might have to spell it out
  ( Reply )
Jeffrey Way May 14th

I’m starting to feel that you guys don’t appreciate the corn references.
( Reply )
1. Mohammad May 14th
  
  LOL
  Seems like you did an extra effort providing those corn facts.
  Appreciated fun.
  ( Reply )
  1. Meshach May 15th
    
    I loved it Jeffrey.
    You’ve got a great sense of humor.
JorgeRB May 14th

Very useful article for a “newb” like me. You do great work. Keep it coming.
( Reply )
Phil May 14th

Great article Jeff, I liked number 20 as I can fully relate to where you are coming from.The great feeling from getting those bugs ironed out never fades for me.
( Reply )
Tyler Diaz May 14th

I enjoyed the read – Just the post title should be altered to something like “30 Development best practices” as this posts covers more topics than just HTML as the title states. Great post , keep up the good work.
+1 subscriber
( Reply )
Mario May 14th

Great. Love The CSS Reset. I should really start using it to stop those headaches.
( Reply )
Drazen May 14th

I am always serious a and honest when writing a comment. I enjoyed this Tutorial really!
Its real fun reading this even for someone how is developing for more than 2,5 years (like me).
Thanks Jeffrey! Now i am a little bit sorry what i wrote in the previous Round-Up but it was honest
( Reply )
Kyle May 14th

Great work Jeff! Always good to see some beginner stuff
( Reply )
ryan May 14th

Great Read…
I know photoshop backwards, forwards, up, down and even standing on my head… but for the life of me I absolutly hate using it to build a website. I user Illustrator… Am i crazy? (i do use photoshop for the normal image work and small part of the design, but than move it into Illustrator to line it all up and create the page/site.)
( Reply )
1. Drazen May 14th
  
  Thats kickass, i never ever heared someone using Illustrator for Webdesign xD
  I know people using Fireworks instead of Photoshop. You could make a Tutorial “Build a Website with Illustrator” =)
  ( Reply )
  1. Callum May 15th
    
    Illustrator’s a lot better for the general layout of image-based designs. You can create boxes to specific dimensions, and do a lot of what Photoshop does (minus bitmap-oriented features). In fact I would honestly suggest producing images in Photoshop and laying them out with Illustrator. Pixel preview’s a great feature for refining the design, as well. People underestimate Illustrator!
  2. sean steezy May 15th
    
    yeah i am actually doing that for mine, though some things are a lot harder to do in illustrator then photoshop but it has it’s advantages. but yeah, callum is right, making a specific sized box is a one click process, but good luck trying to fill it with a pattern…
    go illustrator
  3. Paul May 24th
    
    I just wanted to point out that you can created specific sized boxes in Photoshop too.
    Select the Rectangular Marquee tool (M) and select “Fixed Size” under the styles box.
    Image:
    http://i39.tinypic.com/b7gmmh.jpg
2. Sergio Ordoñez May 26th
  
  I think just depends on the kind of website you are designing, if its a clean corporative site Illustrator could be useful, for graphics oriented sites I still prefer Photoshop because by itself can do the whole work (layout and graphic edition) while Illustrator dont.
  But I guess its just a personal prefferences
  ( Reply )
Sam G. Daniel May 14th

Thanks for the tip on YSlow. Great tool to check the conditions on a site. Learning Photoshop is a must for any web developer now a days. Has come in handy for several projects.
( Reply )
Michael Rice May 14th

This is a fantastic post. Really, this is epic and a must-read for beginners.
( Reply )
Idowebdesign May 14th

Regarding “Never Use Inline Styles”
“It’s like crossing the streams in Ghostbusters. It’s just not a good idea. ”
But crossing the streams did actually killed the beast at the end of the movie
( Reply )
1. Jeffrey Way May 14th
  
  Then tell that to Chris.
  ( Reply )
2. Dan May 18th
  
  Which is why that one should be “Only Use Inline Styles If You Have A Really Good Reason.”
  ( Reply )
Cody May 14th

Nice List!! Lots of useful practices for anyone really.
( Reply )
Jason Kempshall May 14th

Very nice, just wish i had this a few years ago
( Reply )
Joseph Pecoraro May 14th

Great article. I’ll try to add a little to it.
“10: Keep Your Tag Names Lowercase”
This also helps when compressing your content and sending it over the wire (gzip/deflate). Compression works by more efficiently representing repeated content. Since lowercase letters are far more common then capital letters, and because html tags represent a noticeable chunk of any html document you’re likely to see a small improvement in compression if you use lowercase letters for html tags. Its not just convention, its common sense!
( Reply )
1. Joseph Pecoraro May 14th
  
  Since comments with URLs need to wait to be improved I’m putting this in a reply. Here is some analysis and data backing up the claim I made:
  http://www.websiteoptimization.com/speed/tweak/lowercase/
  ( Reply )
Binny V A May 14th

I would add one more – Get an experienced web dev to review your code – you could learn a lot that way.
( Reply )
Wallison May 14th

Show post! Thanks for the contribution.
( Reply )
Norman May 14th

I have been reading nettus for over a year now and I would have to say that is the most awesome article I have read. For me I can’t get enough of getting the basics right. Many thanks.
( Reply )
Jack F May 14th

You forgot Komodo Edit as a free Windows/Mac/Linux editor, it’s my favourite! Nice round up.
( Reply )
Terence M. Stone May 14th

Great must haves. Who is the moron who says Photoshop has no place in Web Development? After Photshop, HTML and CSS learn Flash basics.
( Reply )
Deh May 14th

Great article for beginners.
Just one thing about item: 5: Consider Placing Javascript Files at the Bottom
If i place my .js files outside the “head” tag, my xhtml wont be valid.
So, item 7: Validate Continuously, won’t be possible.
Thanks and congratulations.
( Reply )
1. Joe May 15th
  
  It’s perfectly valid to put js files outside the head tag. Either inside the head or body is fine.
  ( Reply )
  1. Jon E May 15th
    
    I was under the impression that it would not be valid too, but i just ran a check with w3c validator and it does, indeed, validate fine.
Jarod May 14th

This article would’ve helped me tremendously back in ‘nam when I was noobin’ it. Good job, Jeff.
( Reply )
Alexandre HOCHART May 14th

Stay up Late … and drink expressos !
( Reply )
cjroebuck May 14th

Hey, this is my first post on nettuts, i’ve been following for quite a while now and just like to say a really big thanks for all the great tuts.
Im just starting out coding my first website from scratch and one of the noob things I keep coming across and asking myself is this :- which units should you measure widths/heights in, should i use px, em or %? I never know when to use each different type of measure and what the consequences are for each. I know this is in the CSS but its still a very beginnerish question that i want to get straight before i start out!
Thanks
( Reply )
Aayush May 14th

Nice article….i kinda wish someone had told me all these when i started two years ago….I would’ve learned a lot more by now…
( Reply )
kucrut May 14th

You’re a smallville lover Jeff?
Nicely done!
( Reply )
1. Jeffrey Way May 14th
  
  Nope. Never watched the show.
  ( Reply )
pandu May 14th

love your tutorials, thanks jeff
( Reply )
Jordan May 14th

Everyone always leaves out jEdit from their list of editors.
It’s by far my favorite.
Great list!
( Reply )
Dynamitesoul May 14th

This is a great article however as I am a newbie in web development, can someone please point me in the direction of finding a good CSS coding technique and how to use the right tags. With regards to the naming convention, what are the common ID selectors when designing a web site (i.e #wrapper, #container)? I get confused when to use them as opposed to classes.
( Reply )
1. john May 15th
  
  an #id is meant to be used only once per page while a .class can be used numerous times. you can learn a lot from Chris over at (www.css-tricks.com)
  ( Reply )
chrisberthe May 14th

Man-o-man, nice one Jeff.
( Reply )
Art May 14th

Very nice, this will sure help me focus on the things to practice most while I learn html and such.
( Reply )
Taylor Satula May 14th

I feel like a n00b but ive been doing css for years now and still am not good with frameworks, i havent really looked into them though
( Reply )
1. Rory May 15th
  
  Most of them are based of float positioning. They are extremely easy to learn. I don’t know where the author was going saying they’re for experienced developers only (even though I am)
  ( Reply )
Robert May 14th

Visual Studio Web Developer Express (free) is a great tool for web design. It actually does stuff better than Dreamweaver. It’s also a great choice for PC users, although I still use Dreamweaver sometimes too.
( Reply )
1. Vicente Obregon May 16th
  
  Visual Studio Web Developer Express: Maybe the greatest, it works to create, edit and debug javascript. Ubunteros, an option to that (debugging javascript)?
  ( Reply )
Andrew May 14th

WOW Jeff…Another great one
#24 however, there are some of us that live in the open source world and would prefer GIMP instead.
But i think we get your point.
( Reply )
lau May 14th

Pretty basic, nice check list tho. I dont agree with you on everything, but it’s a nice list.
( Reply )
1. Jeffrey Way May 14th
  
  Which things don’t you agree with? They’re all correct.
  ( Reply )
  1. w1sh May 15th
    
    Yeah bitch!
    Don’t make Jeffrey “The Wrong” Way whoop yo ass!
  2. Lau May 15th
    
    fx the h1 on all article-titles.
    In SEO i believe it’s best to keep a maximum of h1 per page.
    If you have a blog you’d probably have 10 articles on the frontpage with 10 h1-tags – one fore each article. Thats where i dont agree with you.
    Personally i would always recommend h2 for article-titles if you show more than 1 article per page (which almost everybody does on the frontpage).
  3. Lau May 15th
    
    Typ0..
    “In SEO i believe it’s best to keep a maximum of one h1 per page.”
  4. Jeffrey Way May 15th
    
    I agree with that. On the main page, place those headings within h2 tags. But then, on the main posting page, change it to h1.
Chesham May 14th

Very good informative article. A lot of these I do, but there are a few I’m currently not doing and will have to look into.
I like the css reset tip. I started using a reset around a year ago and it really helped me a lot. It’s a lot easier to style something when there’s no extra styles from the browser. So yeah, I highly recommend at least looking into them, they definitely saved me a lot of headaches.
( Reply )
cssah May 14th

this is great ,what can i learn after html and css .
( Reply )
1. Bruno May 15th
  
  PHP
  ( Reply )
Duluoz May 14th

Not to be a complete douche – but…
1) You’re miss using the word “tag” when you really mean element in some cases. Where as most elements, with exception to elements such as images, horizontal rules, and breaks contain an opening and closing “tag”.
2) “code compression” is a total contradiction if prior you direct individuals to close tags via a xhtml syntax vs. html – its clearly more efficient to code and parse without the extra characters.
3)… i could just keep going on and on with things I disagree with here… I’m not going to do that. The W3C already lists its recommendations.
You should also search “Operas Web Standards Curriculum” for a great beginner resource.
( Reply )
1. Jeffrey Way May 14th
  
  Code compression was referring to Javascript and CSS. I never mentioned compressing your HTML. It’s not worth it, in my opinion.
  Please feel free to continue on with what you disagree with. We’d love to hear your thoughts.
  ( Reply )
  1. Duluoz May 14th
    
    I disagree with using a reset on principal you’re just going to duplicate your efforts later in redefining everything you just “reset”. This issue has been debated into the ground in the past.
2. Jeffrey Way May 14th
  
  P.S. You’re misusing the words “miss using”.
  ( Reply )
  1. Duluoz May 14th
    
    Ha! – touche.
3. Joe May 14th
  
  Haha I think you’re being very very picky there :p
  Good article though, do a lot of these myself and a few things in my own style. Good resource for beginners.
  ( Reply )
  1. Duluoz May 14th
    
    What’s wrong with being picky?
4. Douglas Neiner May 14th
  
  Using a Reset file normalizes the experience across all(most) browsers. Styling each element after resetting them ensures two things:
  1) The designer actually takes the time to think through future use of the layout.
  2) The finished design is equally polished in all browsers.
  Oh, not to mention my testing time in multiple browsers has gone WAY down since using a reset file.
  ( Reply )
5. Meshach May 14th
  
  Duluoz:
  I couldn’t disagree with you more on the CSS Reset thing… Of course you’re going to have to re-declare all the styling.. That’s the whole point!
  Why do you feel the need to call Jeffrey out on these things?
  You should also search “Operas Web Standards Curriculum” for a great beginner resource.
  Why do you feel the need to direct him to a beginners resource? He has clearly advanced beyond the beginner level by now.
  One of my pet peeves is people pointing out every single little error in someones article… As long as we know what he’s saying.. WHO CARES?
  Rant over.
  ( Reply )
  1. Jeffrey Way May 14th
    
    I love how Meshach is always my personal defender.
  2. Duluoz May 14th
    
    It was not my intention to direct Jeffrey to Opera Web Standard Curriculum – it was to the rest of those reading the comments who would like to learn more.
    Also…
    I would have no problem with those using a “reset” if they would go back and then delete the reset style’s once they’ve address the elements. You’re going one step backwards to go one step forward doesn’t solve anything. That’s my point.
    And please don’t assume “we” know what he’s saying. Not everyone reading this is of the same level of understanding as others.
    I’m really not ragging on Jeffery – I respect what he’s done and is doing here.
    And to those who think I am being picky… ask a watch maker if he’s proud of the inner workings and elements most people never get to see. It matters.
  3. sean steezy May 15th
    
    wow i just had to chime in and say this is getting really funny
6. Andy Ford May 14th
  
  @Dulouz RE: “ask a watch maker” (I couldn’t directly reply to that. I guess replies can only nest so deep)
  I’m the grandson of a watchmaker and am very picky about my HTML and CSS. Great analogy.
  ( Reply )
  1. Meshach May 15th
    
    @Duluoz:
    Sorry for the rant, I was in a bad mood.
    The point of a CSS reset is to reset the styling so that the developer can declare his own styling, knowing that the browser won’t automatically add 10px of padding to headings tags or something.
    It just seems that people are jealous of better developers skills, so then they try to make themselves look big by pointing out very minor mistakes… Guess what? They are human too.
  2. Duluoz May 15th
    
    @Meshach:
    No problem – I love a good rant too!
    Also – I understand the whole “reset” concept – I use them myself! – but I don’t publish a reset style sheet. Once I’ve declared my styles – I go back and delete the reset CSS. There is no longer a need for it. Get my point?
    And believe me, in no way was my post meant to be arrogant or disrespectful, nor do I see Jeffery, or anyone else for that matter, as “better”. I am of the experience that everyone has something they can bring to the table that someone else can’t. And as a whole, as a commenter, we can elaborate on these things and give someone else insights.
    As far as mistakes go – I’m the worst! Just look at errors in grammar and spelling in my comments! But lets be frank – my comments are not to a paying customer who expects perfection. But I do try.
    Peace.
7. Meshach May 15th
  
  Ah ha.
  I sometimes feel the need to let out some steam.
  Anyways, we’re cool, it’s all good.
  This is perhaps the longest threaded comment on nettuts+
  ( Reply )
arnold May 14th

nice article with a good information
,now that’s cool
,thanks Jeffrey
( Reply )
Abdurrahman Gemei May 14th

Nice article! I still don’t understand how divitis is inefficient.
I also have something against Javascript and CSS compressors, something always feels wrong about them.
One more thing, Intype is the best code editor for Windows! It does have a problem with the strict XHTML doctype snippet. It misses the “1″ in xhtml1-strict.dtd. However, you could fix it from the bundles if I remember correctly.
( Reply )
Carlo May 14th

OMG, awesome post Jeff… why stop at thirty lol… there are so much misused markup and stuff that get stepped on daily! luckily this is the majority and very insightful as usual!
( Reply )
1. Jeffrey Way May 14th
  
  Because I was exhausted at 30.
  ( Reply )
  1. Angie Bowen May 16th
    
    So do I smell a sequel sometime in the near future? This was one of the most helpful articles on web dev I’ve read in a long time and would love to hear more of your thoughts.
Kenneth May 14th

Great points but I have a problem with one. The Transitional doctypes are just that, transitional. You should only use them when you’re moving existing code from one doctype (or none) to another. No live code should ever have a Transitional doctype, it should always be Strict (or Frameset, if using frames).
( Reply )
Douglas Neiner May 14th

Jeffery, your post was fantastic! My developer and I were reading over it together and you make great points. Using H1’s as the article title instead of the Site Name/Logo area is the next principle I feel called to implement.
I disagree with one point: “20: Stay up Late”
I think in the long run it would be much better for web designers/developers to exercise well, go to sleep at a reasonable time, and wake up rested.
Just my two cents, but since your article is address to beginners… its something they should start out doing.
( Reply )
xQlusive May 14th

Quite usefull points for beginners, but i could imagine better points for nr16 and twitter? What do those points ad to the xhtml compliance
I thought this article was about practices for beginners.
( Reply )
tutcity May 14th

Great tips!
( Reply )
Matthew Conway May 14th

Great list! I tweeted it for you (and the benefit of my friends, of course).
( Reply )
Muhammad Adnan May 14th

great list , i just downloaded the YSlow Firebug Plugin.
compressors was also new for me.
Thanks JW.
( Reply )
Benj May 14th

Great Tips!!!
( Reply )
iHack.ASIA May 14th

I really never knew no.5 tip, btw how to use firebug into layout tab? i cant find the layout tab, can help me, anyone?
( Reply )
1. astroot May 14th
  
  With HTML selected, look on the right side of the screen, there are three tabs, Style, Layout, and DOM.
  ( Reply )
Coops May 14th

Printable Version required…. it would be great to print these articles out so i can keep a record of them or read them on the train on the way home… stuff like that.
Is it possible to do this Envato?
( Reply )
1. Aaron May 15th
  
  I 2nd this idea. Perhaps something similar to the printable PDFs that “Before and After Magazine” offer… and make the best of the best “tuts +” only?
  ( Reply )
Cameron May 14th

Wow, thanks heaps for this list.
( Reply )
Owen May 14th

Superb article, Jeff. Glad we have you as part of the community.
( Reply )
HorusKol May 14th

Nice article – and lots of good ideas. I’ve been at this for years, and there were still a couple of points that I either forgot or didn’t know in that list.
However, why not use for navigation menus – you get to use the for major navigation categories and for links and sub-categories.
( Reply )
1. HorusKol May 17th
  
  sorry – just noticed that the comment system scrubbed out my use of DL, DD and DT in that comment
  ( Reply )
Parthasarathy May 14th

Great article
#27 Should be some where inside top 5
( Reply )
Douglas Wade May 14th

Very informative, great info for us dinosaurs who have been coding like it is 1996.
With all the new browsers available today, you need to have a step by step that you can use as a guide to keep you straight and this is it!
Thanks
( Reply )
Val Nelson May 14th

Thank you for compiling such a fantastic and useful list.
From my more SEO-focused perspective, I would add a caveat on #11 about H1-H6 tags. Definitely use them, but within reason. You said “For semantic and SEO reasons, force yourself to replace that P tag with an H6 when appropriate.”
I would say that if it’s a paragraph, stick to the P tag for semantic and SEO reasons. Use header tags only for page titles, site section titles, page section headings and subheadings, and similar. If overused (such as for paragraphs), header tags will be seen as spammy by search engines.
Plus the keyword effect is diluted when you have so many header tags. Three or four levels of header tags should be plenty on the typical page.
( Reply )
Michael May 14th

> “The amazing “AHHA” moments, at least for me, always occur late at night. This was the case when I first began to understand exactly what Javascript closures were. It’s a great feeling that you need to experience, if you haven’t already.”
Also get up, go to the toilet, have a coffee etc. Most of my “AHHA” moments come when I’m so frustrated that I need to take a break.
( Reply )
Carl - Web Courses Bangkok May 14th

Wow, this has summed up our Web Design for Beginners course in a nutshell!
I`d like to comment on the following parts of the article as I felt they where particularly prevalent:
“What better way to learn HTML than to copy your heroes? ”
- So so true, I have butchered and changed and hacked so many of the sites that made me go wow in the vein that I can make others go wow too. In doing this, I had those “Ohhhh thats how you do it” moments as the morning light pokes its head through my curtains! Priceless.
“Take a few hours to memorize as many PS keyboard shortcuts as you can.”
- When I was a young designer, I had a manager who saw me using Photoshop then banned me from using the quick toolbar. In doing so I had to learn all the shortcuts and still get my designs in on time. A frustrating experience at the time, but boy has it paid off. For example when I have a client sitting next to me I can quickly chop, change, alter, sque designs to that we have a Blue Peter style design that we can make all aligned and perfect later.
“Participate in the Community”
- Participating allows you to connect with people out there and help you learn from your heros, so make sure you have those “heros” on your twitter list as well Commenting on wonderful sites like this is a great way of participating.
“Ever notice how you don’t truly understand something until you’re forced to teach it?”
- This made me smile from ear to ear! Starting Web Courses Bangkok has forced me into really knowing what I thought I knew! Creating our course material is an ongoing thing and I must stay abreast of what is happening in the web, but then going from script to teaching…is a whole different ball game. Its one thing to know it, and a completely different thing to know it well enough to teach. You know they how…but do you know the why?
Finally, I would like to add a tip of my own, and that is Magazines. I am a massive fan of .net. Its important to choose your information sources as a beginner or you end up in some forbidden forest that only a few know because some site or wannabe expert said “this is the future!”. Make sure you learn from respected sources. Example, you don`t need to know how to code in JQuery just yet as a beginner despite everyone saying its the latest and greatest thing. Stick to the foundations of the web HTML and CSS, later concentrate on design, usability, copy writing and information architecture…once you have an idea of these things its good to move onto the “Bells and Whistles”.
As my Aikido teacher always said “Use your centre” and the centre can be found in good clean coding of HTML and CSS.
….am I right? or wrong? Look forward to some follow ups on this.
( Reply )
Matt May 14th

I actually found it easier to pick up CSS by using CSS frameworks. It forced me to look around a bit more to learn how to use them.
Anyhow, I haven’t written pure CSS in a while now. I use Compass-Style (SASS) to generate them. Much easier.
( Reply )
Rakesh Jha May 14th

Excellent tips, I already practice most of them though.
btw, I like to ‘organize’ my css (using styleneat.com) instead of compress when the stylesheets are not too huge and too many, or say, when the compression doesn’t matter.
( Reply )
Brian May 14th

Im jumping on the bandwagon on this. Im not sure if someone has mentioned this one yet.
But along with compressing your CSS and JS, you should also compress all png, jpg, gif files with http://smush.it/
Good Luck
( Reply )
Myfacefriends May 14th

all i can say THANK YOU SO MUCH!
( Reply )
lawrence77 May 14th

Good stuff jeffrey way….
I just say a single word in all ur posts “wow”
( Reply )
Mike May 14th

One thing you caught me on was including JS files at the top. I’ve always done that, but I’ll start moving them to the bottom.
Also, I’m downloading FireBug now.
( Reply )
Mar May 14th

You know on that old movie trope that whenever our protagonist needs to know some bit of news, all he or she has to do is turn on the TV or radio and miraculously the EXACT news that they needed to hear about just happens to be on at the exact moment they turn it on?
Well, that’s what this article is for me. I’m making a transition from print designer to web designer and the information here is priceless.
Thanks a lot for all the work you put into this!
( Reply )
dj May 14th

Very informative, great info and quite usefull points for beginners.
( Reply )
Andy Ford May 14th

This is a good list for HTML beginners. Here are a few things that I noticed:
#3 – The css selector “#someElement > p” seems a bit of an awkward example for a beginner. Perhaps something like “p.warning” would be more appropriate. (also, it’s worth mentioning IE6 can’t grok the descendant selector)
#5 – I totally LOL’ed when I read the “And now you know…” sample content!
#11 is a bit misleading in that it shows an H6 coming right after an H1 without the hierarchy of H2-H5 coming in between them. I think it’s important for beginners to understand the semantic hierarchy of the heading elements as a way to hierarchically structure/outline a document as opposed to just “hey, I’ve got 6 different ways I can style headings”
#23 – I like (okay, I’m totally addicted to) Twitter, but it seems off topic to mention it here. Kinda feels like a ploy to get more followers.
#27 – there’s a typo: “vertical-align: baselinebaseline” – looks like it’s being created in the javascript syntax highlighter. I’ve seen this problem come up before with js syntax highlighters and don’t recall ever finding a solution.
One thing I usually recommend to HTML beginners is to get in the habit of proper indenting. It helps reinforce nesting and parent/child relationships.
I hope I’m not coming across as being too critical. I applaud you for putting this list together for beginners. We were all beginners once and it can be intimidating trying to learn HTML.
( Reply )
1. noob May 19th
  
  IE 6 doesn’t support child selectors. Descendant selectors are fine.
  ( Reply )
Julius May 14th

Nice one for beginners
( Reply )
Synergy Informatics Web & Hosting Solutions May 14th

Hi,
Nice articles… with a fantastic list of tips one must learn.
Thanks for such a wonderful article…
Regards
Synergy Informatics Web & Hosting Solutions
( Reply )
Nikki Selene Lamagna May 14th

I just have one quick thing to say about the CSS Reset – I think it’s a good idea because it causes developers to explicitly declare what they want each element to do. An “anchor” tag is supposed to display as blue/underline but with an in-depth CSS Reset, it pulls all the formatting which forces the developer to make a conscious decision about how it should be styled. I understand that it’s a “one-step backward, one-step forward” practice but the benefits of coding the site to fit within your standards and theme far outweighs the detriments.
Thanks for the reminders on good coding practices Mr. Way!
( Reply )
Ricardo May 14th

Some points are more of a matter of opinion (like advices to the beginner, rather than best practices).
Get to know Gimp, validate when you have finished and don’t compress your CSS (this way we can learn from you too!).
( Reply )
macias May 14th

tips are great ./ short and very useful /thx jeffrey
( Reply )
Erin Lynch May 14th

Wonderful piece for beginners.
( Reply )
Chukki May 14th

Nice Article. But the order can be discussed
( Reply )
1. Jeffrey Way May 15th
  
  They weren’t ordered according to importance. Just 30 tips.
  ( Reply )
w1sh May 15th

Thanks for the compression tip, cut cut cut, and the “learn JS with Firebug” hints you dropped.
( Reply )
innovator May 15th

great tips.
( Reply )
Danilo May 15th

Thank you.
( Reply )
tom May 15th

Hi there,
nice article for beginners, but I wouldnt’t recommend to compress everything by hand because it can ruin your code. I tried different compressors leading to different results which left me quite unsatisfied.
A better idea is to use the yui minifier which does a great job in compressing your files an also caching it without touching your sourcefiles.
Anyway, I’ll show this arcticle to some of our trainees.
Thx
( Reply )
Jason May 15th

Useful tips, you can find more at this nice little site: http://webdosanddonts.com/
( Reply )
wpheroes May 15th

I wish I had this when I was learning
( Reply )
Johannes Holmberg May 15th

Great Tut! I picked up some things here and there, thanks!
( Reply )
DMC May 15th

“11: Use H1 – H6 Tags”
You forgot to mention that if you do use all the header tags, make sure to style most of them to the same size. It may well be SEO best practice, but having 6 levels of hierarchy in type is definitely very bad practice in typography. And I’ll put typography before nonsense SEO any day.
“23: Use Twitter”
I would rather hack out my eyes than use this awful, pointless service.
( Reply )
1. Jeffrey Way May 15th
  
  I’m sorry to hear that you don’t like Twitter. I have my current job because of Twitter.
  ( Reply )
2. Bruno May 15th
  
  Twitter is the trend of the moment, nothing more.
  ( Reply )
  1. Meshach May 17th
    
    Is that a bad thing? haha
Tamas Erdelyi May 15th

That was awesome! I’ve made web pages for a couple of years, but your guide definitly show me new things.
( Reply )
Adam May 15th

Awesome tutorial.
You forgot PHPDesginer in the editors section, it’s the best editor. (I think PHPDesigner even better than e-Text editor)
( Reply )
Ragnar Thor May 15th

Gave it a tweet!
( Reply )
Aaron May 15th

“CSS frameworks are for experienced developers who want to save themselves a bit of time. They’re not for beginners.”
So very very true. And a great way to end your article.
Wish I had blog posts like these a half a decade ago ago when I started web design. The new kids on the block are so lucky.
( Reply )
Sacha May 15th

I’m pretty sure that what your poll results are not an example of the Pareto principle.. otherwise great article !
( Reply )
Philip Davies May 15th

Hi Jaff,
I would like to thank you for a great post.
I have been leaning web develop for
a year now and this list helps lot.
One thing I would to say is this that,
you left out from your list, a real good
programme it is called WeBuilder 2008,
I find that it help me with my work.
So keep up the good work jeff
Phil Davies
( Reply )
Clinton Montague May 15th

Great tips, I could have really done with a list like this when I started out almost a decade ago! Just one note – I’m a ‘PC lover’ (actually, I’m a mac lover, but work on a PC), my editor of choice is UltraEdit – http://www.ultraedit.com/
( Reply )
Munkhoo May 15th

Thank you very much! You are the best!
( Reply )
Joe May 15th

Also worth mentioning that H-tags should go in order from 1 to 6 in order without skipping; not for validation reasons but for accessibility guidelines.
( Reply )
Frika May 15th

Great tips, not only for beginners… Thank you.
At #5 I have a principel question, though. If we using a js framework (jQuery) and we have to hide some elements before the page is rendered in the browser (for example the menu), we have to place the js at the beginning of the html file. Right?
So how can we ensure that the js is executed before the content of the site is displayed? I had some problems in the past in this way. There was the content which has to be hidden stayed on the screen for a millsecond or so.
Is this browser dependent or are there some rules /tricks to avoid this.
Thanks
( Reply )
Callum May 15th

Sorry, but there is nothing at all wrong with using inline styles and javascript. Inline javascript is sometimes a lot better for passing unique arguments in functions, especially in generated lists. For example:
bar
bar
Makes no sense…
As for inline CSS, it’s not always plausible to have to use external styles. There are a lot of styles specific to one element. I can understand it from the point of view that it makes code a lot cleaner, but it sometimes meaning adding classes or IDs to singular elements – that seems a very pointless idea.
( Reply )
Callum May 15th

Why does this parse HTML? Sigh…
( Reply )
Mark May 15th

You forgot Komodo Edit in the editor list its free and really nice if you are stuck in windows. Otherwise I would definitely go Coda or TextMate.
@timothy great points but there are other methods for achieving new windows other than the target attribute. such as targeting rel=”external” and a simple script to append the attribute, while it may seem excessive it really is simple and clean.
( Reply )
PotHix May 15th

Æ!!
Great article!
On editors i just want to include VIM! =)
Congrats,
Cheers,
( Reply )
Dylan Parry May 15th

Nice article, and although I’m not a beginner I did find a couple of points that made me think about the way I do things myself.
I did notice that there’s a slight error in one of your points though. “27: Use a CSS Reset” has the keyword “baseline” twice on line 14 in the sample code.
( Reply )
yhS May 15th

I think there’s a better way for CSS reset:
* {
margin: 0;
padding: 0;
}
( Reply )
1. Jeffrey Way May 15th
  
  Sorry – but that’s not a better way. There’s much more to a reset than just zeroing the margins and padding.
  ( Reply )
2. Robert May 15th
  
  Faster (in terms of how long it takes you to type) – totally.
  Better? No so much.
  ( Reply )
  1. Michael May 17th
    
    Also using * is fairly time consuming for the server to ‘do the math’.
    Best to use the CSS Reset in the article as a good starting point.
William Campbell May 15th

AWESOME! TOTALLY AWESOME!
( Reply )
Norel May 15th

I am a beginner and that’s why I am probably wrong, but is compressing CSS and JS really worth??
I mean, in 1998 when internet speed was measured in KB, CSS file size were relevant, but nowadays we are talking about saving a 25% of some KB from CSS files that I think cannot be noticed.
I think there is not such equilibrium between bandwidth saving and legibility problems like in 199x
( Reply )
1. mpiftex May 16th
  
  I was wondering the same thing. Save 0.5 or 1kb on the CSS file does it make any difference? css files are cached anyway, aren’t they?
  Also if everybody starts compressing their style sheets, how will we learn from looking at other peoples work?
  Great article btw!
  ( Reply )
  1. Jeffrey Way May 18th
    
    Firebug will de-compress CSS files. So that isn’t an issue.
Cameron May 15th

Very good article. I’m what you would call a “beginner” and this was definitely on the top of my list.
( Reply )
sajay May 15th

nice tutorial for a beginner, Net tuts rocks
( Reply )
Robert May 15th

I can’t say that I agree with everything here… at least not in the way you present it. For example; your argument to use lowercase on all HTML attributes offers no defense other than that it complies with your own aesthetics.
In reality; uppercase HTML will return warnings in W3C validations under most doctype options. So that’s a pretty solid reason not to use uppercase.
I’m all for validating HTML; but CSS seems a bit tricky- I’ve yet to see a validator that returns an intelligent result. W3C returns warnings if your border and background share the same values…. why? I have NO idea. But it’s things like that that make me not want to validate my CSS.
I also don’t really agree with ‘Style Every Element’. Why bloat the CSS with unnecessary styles ‘just in case’? Rather- I would style what I know the client is going to use, and should the client return to me needing additional design well; that’s well within our contract at $X per hour.
I’m very glad you cautioned AGAINST frameworks and AGAINST inline CSS though. I think both have their moments; but not for an HTML beginner. Best to learn the attributes and learn to avoid sloppy coding practices early on. In the end they will have enough background to know what Framework works for them, and when inline CSS is a forgivable sin.
But seriously… abbr and cite? Why not tell them to learn ‘address’ and ‘marquee’
( Reply )
1. Jeffrey Way May 15th
  
  Abbr and cite were just examples. When I said, “Learn all tags”, I was also referring to “address”.
  When I said to validate continuously, that doesn’t mean that it has to 100% pass. Most of the time, my sites don’t pass because of browser-stylings, advanced selectors, etc. But it’s still good practice to catch any mistakes that you made.
  In reference to styling every element, how will you know what the client is going to use? We’re talking about maybe ten more properties – not much bloat.
  ( Reply )
SiGa May 15th

I agree to all of them, but I´m not sure about number 20 (though I experienced that, too, but wouldn´t make it a rule)…. LOL Me I often had my “AHAA!” moment the next day, after sleeping over it. Thanks, Jeff, it´s an important summary!
( Reply )
1. Robert May 15th
  
  I’m the same as you! I usually brainstorm during that time between laying down and actually falling asleep. Or better yet; in the shower! I’ve coded entire PHP scripts in my head while in the shower before.
  ( Reply )
Hasan Mahmud May 15th

Excellent!!! Must read for CSS Beginners
( Reply )
Jim Gaudet May 15th

Number 20 holds true for me! My best work is done in the early morning hours…
( Reply )
Mark May 15th

Number 3 should not be strictly enforced. Go read Yahoo performance best practices.
There are times when inline CSS is to be used. Both Google and Yahoo both do it.
( Reply )
Jason Wilson May 15th

A good list but I can’t agree with a couple of things.
Rule 11:
The heading tags are semantic tags used for headings only. You do not need to use all 6 levels of headings if you don’t have six levels of headings.
You certainly don’t use it to highlight important tidbits which is what your example seems to suggest doing. A better example would be:
H1: Corn, the Magical Cob
H2: The History of Corn
H3: The Early Years
P: Blah, blah, blah
H4: The Discovery of Corn
P: Blah, blah, blah
P: Blah, blah, blah
H4: The First Use of Corn as Food
P: Blah, blah, blah
P: Blah, blah, blah
H3: The Second Generation
P: Blah, blah, blah
…
Rule 19:
I don’t think you go far enough here. Using them is not the same as using them properly. For example, if an image is only decorative the alt attribute should be set as: alt=” “. I know this is just for beginners but using alt attributes incorrectly causes the same problem as not using them.
( Reply )
1. Robert May 15th
  
  alt=”" still returns invalid in most doctype markups though. Granted, there is no need to have ‘perfect’ validation… but putting in a blank attribute seems well… pointless.
  ( Reply )
  1. Jason Wilson May 15th
    
    Well to be clear, there should be a space in that alt attribute. alt=”" would still be a blank alt attribute. alt=” ” is deliberate white-space.
john Dangerous May 15th

There should be a post on Firebug alone.
( Reply )
Jason Grant May 15th

Well some of these are somewhat of misguidelines and should be avoided.
You should not be using more than one CSS file on your site as HTTP gets are the most expensive calls in terms of client side performance.
You should also (arguably) not be using CSS resets.
Targetting IE is also potentially a bad practice. Your CSS should work in all browsers without hacks. There are more.
( Reply )
1. Jeffrey Way May 16th
  
  #1) Ideally sure, one CSS file would be great. However, for larger sites, this is unrealistic.
  #2) Resets are up to the developer. I 100% prefer them, and many others do as well.
  #3) It’s not a bad practice by any means. It’s not ideal, but is most of the time required to compensate for IE6.
  ( Reply )
Diego SA May 15th

What a post! Bravo!
You’re funny too! Great way to show the 30!
( Reply )
Heiko May 15th

Nice article, but presenting Intype as the very best editor on Windows is extremely overstated.
I must admit that it’s a quite promising product, but it’s in early alpha and – despite all of it’s “tab-triggering awesomeness” and beautifully clean interface – still suffers a lot of basic functionality.
After having bought e – Texteditor, which turned out to be quite a disappointment, I have now discovered Notepad++, which for me seems to be the absolutely best option on Windows.
Extremely flexible, highly extensible and all of that for free.
( Reply )
Dextro May 15th

I love this kind of stuff. Nice article!
( Reply )
Allyanora May 15th

wow, this helped, thnx a lot
And about number 20, well… I rely more on how I’m having fun coding, when “I’m in the mood”. This comes hard, but it’s worth it, and i luv it
( Reply )
Jacob Gube May 15th

#28 is a CSS / style best practice than it is an HTML / content structure rule. #20 is subjective, I like working in the early morning after a good night’s sleep. In contrast, late at night, I am more prone to mistakes and distractions.
( Reply )
sean steezy May 15th

i had a blast reading the article and then the 5000 comments afterwards… great job Jeff. and all those h8rz can suk it
( Reply )
Alex May 15th

I’m one of those “many users only take advantage of about 20% of Firebug’s capabilities.” I’ll need to look into that.
( Reply )
Bruno May 15th

Firebug is indeed very good, but if you find yourself using safari more often, then you also have the option of using the webkit ( web inspector ). In my opinion it’s just as good.
( Reply )
Andy Feliciotti May 15th

Pretty much sums up everything you need and should know, great post!
( Reply )
Susan Litton May 15th

Have to admit I got a chuckle out of this one as I found myself reading this article at 2am :
20: Stay up Late
Nice article – I’m not a beginner but I learned stuff.
( Reply )
Edgar A. Gonzalez May 15th

I started out as a graphic designer but have recently made a career shift into web design. I have strong (x)html and CSS skills and am currently working on adding Javascript to my “tool box.” (I feel like I’m cheating when using jQuery!)
This is an excellent post. I’m a strong believer that no matter how skilled, one must always revisit the basics. A strong foundation is key.
I hope on your next revision of this list I don’t have to pause and almost shut my computer down when I reach #15 (learn to target IE).
( Reply )
coder May 16th

Hey Guess what!, i not a begginer then. I knew all these tags and useful html/css the only thing i need to learn is how can i align elements using CSS.
So can you tell me where can i find tutorials about converting PSD files to working xhtml/css live.
so that i can more concentrate on css advance techniques, thanks Jeff
( Reply )
Nate May 16th

It step 3, where you put “#someElement > p”, what does the > do? I’m pretty good at CSS but I’ve never seen that symbol used before.
( Reply )
Brian Cray May 16th

Can never have too many posts that point newbs in the right direction.
Cheers to a great beginning!
( Reply )
Damien May 16th

Always nice tools and tips for beginner and advanced remember !
Tanks
( Reply )
Web design cheltenham May 16th

Great ref, have been doing this stuff for a few years now but always learning – thing change all the time so this is a great post even for the well seasoned developer, as for firebug well… life just wouldn’t be the same without it!
( Reply )
WEBDEZINER May 16th

very nice tutorial, go on like that!
( Reply )
nate May 16th

Is there a netuts tutorial on firebug?
( Reply )
Angie Bowen May 16th

Fantastic article, like some others I wish I had had access to something like this a few years ago when I started learning. I still got some really good ideas from this list though.
I have a question about using the h1 tag for the title of your posts. What do you set the title of the blog at in that case? Since it’s usually an image anyway do you just let it be an alt tag and nothing more?
Thanks so much!
( Reply )
Web-Design Bonn May 17th

Well done, thanks
( Reply )
Philo May 17th

Great Article Jeffrey!
( Reply )
Shodan May 17th

Great list. Not sure about splitting DOWNLOAD Firebug and USE Firebug into two separate items but hey… lol
My only addition would be learn what “semantics” means how it applies to HTML.
( Reply )
Ryan Glover May 17th

Cool stuff. I thought I was ahead of the beginner slot but I definitely missed a few of these. Thanks Jeff!
( Reply )
Philips Tel May 17th

Good job Jeff, your tutorial is very nice…
i will implement it in my own site….
thank you
( Reply )
rap May 17th

this is a very nice list indeed. its funny that I’m working as a web developer/designer for two years now but still don’t know what’s the DocType is for. I just use the default xhtml strict from dreamweaver.
( Reply )
joel May 17th

cool
( Reply )
Emerson | E42 May 17th

Don’t forgot your roots – this stuff is key!
( Reply )
Al May 18th

You talking about some applications but you forgotten some really attractive for web development :
- Gimp (is free, not photoshop) and release 2.6.x is really attractive
- Eclipse (for web deb in html, css, php, ruby, python, etc)
And for Gnu/Linux users :
- Kdevellop
- Quanta +
- cssed
- inkscape for svg animation (native in the next firefox 3.5/4.0
etc.
( Reply )
rei May 18th

GREAT!!
( Reply )
On a limb with Claudia May 18th

My favorite beginner coding advice is: “code like the person following behind you knows where you live.” In other words, label everything. Nothing says selfish programmer than lines and lines of code that are not labeled.
( Reply )
Jens Grochtdreis May 18th

Well, most of the tips are pretty basic but some are simply wrong in the way they are presented.
Do not ever give “all” images an alt-attribute. If the image is just for decoration, merely an icon without any extra-information for someone who doesn’t see it, an alt-attribute should not be placed. Just leave the alt-attribute blank (even no space) so sreenreaders won’t recognize and read it.
Inline Styles and inline Javascript can be usefull sometimes. There must be a reason why they are allowed. Maybe you place inline styles beacause you want some parts of a page individually styled by your customer using his CMS. You wouldn’t want him to modify the CSS, wouldn’t you? Inline Javascript is very usefll when adding Flash via Javascript to page.
And it would not be a difference if you publish a blog or a big newspapaer-site. Each page’s h1-heading will be ignored by Google. So why should I place my blog’s-headline into h1? Please don’t!
( Reply )
1. Jeffrey Way May 18th
  
  You have to learn the basics before you break them. Surely you can understand that.
  Please post a link detailing how Google ignores H1 headings. I HIGHLY doubt that.
  ( Reply )
Deven May 18th

Absolutely Important and must follow points. Great post Guys.
( Reply )
joyologo design shop 2.0 May 18th

great article, thanks for tips..
( Reply )
Ben May 18th

Wow! Incredible list! I especially liked #20 This list really helps people learn better practices and helps us recognize possible bad habits.
Thanks a million!
Retweeted
( Reply )
Art Insane May 18th

Great one…
( Reply )
B A B U May 19th

It’s worth mention netbeans in the editor.
( Reply )
Aaron May 19th

I don’t completely agree with #15 “Learn How to Target IE.”
While I do agree, making your web site proper in ALL browsers, I don’t agree with hacks. Ultimately your XHTML and CSS should always be valid and you won’t need the IE stylesheet. This really isn’t a good way for a beginner to start because they’ll get used to working with a separate stylesheet for IE when they have a problem instead of figuring it out the proper way.
Granted, I do use an IE stylesheet…but I only do this if it’s my last resort and usually it’s only a couple of lines of CSS and that’s it.
( Reply )
Markus May 19th

If you want to debug and trace JavaScript you should take a look at the new developer functions included in IE8. The JS Debugging in there is better than the one in Firebug.
( Reply )
falcon May 19th

Great Tut!
( Reply )
hybridanime49 May 19th

Awesome write ups! I couldnt’ agree more!
( Reply )
Nahla May 19th

Great post Jeff
when starting learning most articles & tutorials guide u to how to code or do things, but rarely u can find an article covering the general basics & best practices. So really thanks for that.
It would be great if this post became the starting of a series of “Best Practices for Beginners”. u know with sequels targeting CSS & JS and maybe even PHP
you guys at nettuts+ are doing a great job but us beginners we really need more of these articles.
For me i really need to #26: Participate in the Community.
in most off the times i gain lots of information from reading the comments of the readers, So this will be my starting point
now i should go and do some coding .
( Reply )
Randall May 19th

Wow, I completely loved this article. It made me realize I needed to get back to basics. Photoshop is a wonderful asset if one can afford it, but it isn’t the end all if you don’t have it. GIMP is a great sustitute while you save up for it.
( Reply )
WallpaperDude May 19th

I don’t disagree with 5 and 6, I’m just old-fashion. So I still occasionally do them. No biggie. 7, however, I’m iffy about. The whole obsession with making sites all uber valid is a nice pipe dream, but it’s kinda overboard. I’ve seen MANY sites that work and look great in the top four browsers that are so far from being valid it’s not even funny. As long as it looks ok and works that’s all that should matter. If it doesn’t look good on your iPhone – whatever.
( Reply )
pdx May 19th

I am a super newbie and this is just the checklist i need to refer to to get started. THANK YOU!!
( Reply )
tamilsweet May 20th

Great article… must read for beginners…
( Reply )
Rik Verbeek May 20th

Agree with almost everything. Only have a problem with the seperate stylesheet for ie users. Just make it work in all browsers! Saves you a lot of work later…
( Reply )
Andreas May 20th

Can’t tell you how much your articles and tutorials have helped me!! really really!!
Thanks Jeff!
/Andreas
Denmark
( Reply )
French guy May 20th

This website is like a mine of gold. Love it.
( Reply )
scottshane May 20th

Use sprite when you can to reduce server requests.
http://www.alistapart.com/articles/sprites
( Reply )
1. Scogle May 21st
  
  That’s a good technique to know, but I’m not sure if it is really something for beginners. I’ve been designing for a few years now and I’ve never used sprites.
  Also, I just thought I’d point out that when I looked at this post with YSlow it took almost 15 seconds to load and got an overall grade of D.
  ( Reply )
yassine May 21st

good work tkx youuuu
( Reply )
loto May 22nd

great list .. you have collected common mistakes.. very good. May be later you can expand it for html,css,js separately.
( Reply )
Dave May 23rd

For some reason when I use the provided reset CSS, my test text repeats twice. Odd. I’ll figure it out though. This is a great list of basics!
( Reply )
Miro May 24th

Great Tut!
( Reply )
Erwin Heiser May 25th

Solid advice this.
Only nitpick: sometimes it’s OK for your alt attribute to be empty.
See http://www.w3.org/QA/Tips/altAttribute for more detail.
( Reply )
Ben D. May 26th

How do those CSS/JS compressors work? Do they “compress” in the traditional sense of the term (i.e., the way PKZIP or gzip does) — or do they just remove whitespace, comments, etc., and maybe collapse redundancies?
I guess I’m just thinking that compression belongs to a different layer of the stack. If your web server isn’t compressing files before sending them across the wire, it should be.
And if the server is compressing, do the compression techniques you recommend provide any additional benefit? Because I can imagine a number of downsides for developers.
For example: suppose you need to make a quick tweak on the server, or someone wants to download one of your CSS or JS files and view it in a plain-old text editor or with a command-line tool like “less”. Either of those things could be significantly more cumbersome if the files are compressed.
Not to mention that it adds a couple of steps to the process of revision/bug-fixing.
( Reply )
Louis May 27th

Thank you so much for posting this. This gives me some ideas on how to create my own CSS-website.
( Reply )
Sushil May 28th

Thank you jeff for this wonderful basics tutorial…..Even i dont know about before reading this tutorial about yslow,firebug they are awesome development tools.
( Reply )
Roberto May 28th

Excellent tips, all of them. Thanks!
( Reply )
Vimal May 31st

Great Read! Excellent Article.
In my opinion Fireworks is way better than Photoshop when it comes to web designing.
( Reply )
jack June 1st

Thanks..Thanks..Thanks..Thanks..Thanks..Thanks..Thanks..Thanks..Thanks..Thanks..Thanks..Thanks..Thanks..Thanks..Thanks..Thanks..Thanks..Thanks..Thanks..Thanks..Thanks..Thanks..Thanks..Thanks..Thanks..Thanks.. allot…..:)
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!:)
( Reply )
Vadim June 1st

Thank you for the tips!
( Reply )
deblueconfuse June 1st

Greaat!!
( Reply )
gopinath June 1st

it,s very useful
( Reply )
Ramsez Stamper June 2nd

Good article, though “Learn photoshop” doesn’t fit , lol, that should be a whole article in it’s own right
Also, you should never use “If IE do this else do that” code. A good programmer can code for all browsers without having to resort to that. It takes a while to get it right, but you learn how all browsers behave without just patching things for IE.
( Reply )
1. Jeffrey Way June 2nd
  
  Really? For complicated sites? Then why do so many huge design companies use them?
  ( Reply )
Neeraj June 3rd

Very helpful. I have just started working on web-project and this site is helping me a lot.
Kudos for your effort!!.
( Reply )
Archie Bishop June 3rd

What’s with Reverend Desmond Tutu being tied to the top a ladder, stuck behind
a massive piece of corn on the cob?
( Reply )
Abrand Lincoln June 3rd

thank you for the advice. although it’s my first year in serious css and javascript I couldn’t be more happy about the existence oc tipodgraphy or jquery
by the way is because of articles like this one that I’m into plus membership.
keep the goodwork please. bests from barcelona,
p
( Reply )
lebisol June 4th

very nice checklist, surprised to read #5…never really thought of having JS at the bottom of the body.
( Reply )
Pablo Alejandro Pérez Acosta June 5th

Very thanks for your article. I am a ASP.NET developer and with this article I realized that I missed lot of web design fundamentals.
From Bogotá, Colombia
( Reply )
bear_puppet June 7th

Why PS?
does GIMP not good??
( Reply )
User June 8th

I think Fireworks is better than photoshop for web develpment too, resources like “pages” in fireworks is extremily usefull
( Reply )
craig June 8th

Jeff, how about sprite image and optimizing image color for the web? Those are also essential for website performance.
( Reply )
Amber June 11th

Thank you so much, Jeff. I appreciate you putting this list of HTML basics together for those of us who are still afraid of the word “code.” Doesn’t sound so scary now… (well, it’s still a little bit scary). Thanks again.
( Reply )
LGR June 14th

I prefer to use Bluefish on Linux for coding. I tried – Quanta + and cssed that were mentioned earlier, but found Bluefish had what I needed. Just another Linux option.
( Reply )
video games June 15th

1) JavaScript at the bottom of the page.
I don’t believe I’d never thought of that before. Very smart. The only downside I can think of is that, for slower computers, JS-required functions won’t be accessible until the page has fully loaded. If, for example, the navigation bar required JavaScript, they user would not be able to navigate until the entirity of the page loaded. As opposed to putting the navigation JavaScript directly after the navigation bar, which would allow for navigation after the navigation bar loads. Only makes sense to me.
2) IE-specific stylesheets
Absolutely not! There is always a cross-browser alternative. I’ve found that 99% of Internet Explorer problems are due to padding and margin problems, because IE adds padding to the total width of the element. This is easily solved with
information
For a cross-browser alternative. Using browser-specific coding is an absolute no-no.
3) ySlow
Installing now.
4) Compressors
Thank you so much for the links. I’ve known these existed, but never knew where to get one.
5) CSS Reset
Yours is rather extensive. I find that a simple * { margin : 0; padding : 0; } is all that’s necessary, ever. Listing each tag seems too flimsy.
Everything else, I’m already doing.
Great article!
( Reply )
1. Jeffrey Way June 16th
  
  I disagree on the * {margin: 0; padding: 0;}. It’s too intensive, and there really isn’t a need to zero out EVERYTHING.
  ( Reply )
Bryan June 16th

i find it very useful for web designing! specially the css reset and css compressor! thanks!
( Reply )
Andrew Hedges June 16th

Nice article. One nit to pick: why no mention of ? It’s all I use these days.
( Reply )
Andrew Hedges June 16th

Hmm. That should read “why no mention of <!DOCTYPE HTML>?”
( Reply )
Juarez P. A. Filho June 16th

Wow… It’s really cool! I already use every practices showed for you. Anyway. Thanks for remind us. =D
( Reply )
em June 16th

Nothing about back-end:|
( Reply )
reezluv June 16th

great tuts..I will apply it.Still learning the best ways..:D
( Reply )
Lizzy June 23rd

I didn’t know there’s a compressor. @_@ Thanks for the link! And uh, I like #20. I do that sometimes.xDD And it does work at times. Haha!
Photoshop is really handy.
( Reply )
SEO Paw June 26th

Thanks for sharing this article, its very good stuff. Thanks agine!
( Reply )
weberica June 27th

20: Stay up Late – yes! lool give me 5!
( Reply )
lhoylhoy July 4th

hehe! it’s a shame i had neglegted 16 best practices hehe! Thanks man!
( Reply )
DjacK Height July 6th

Neat-o-burrito!
( Reply )
H0s4m July 12th

Really I make profit from your tibs
thanks man
( Reply )
Hali July 13th

Ahahaaaaa, some of your ‘what NOT to do’ examples made me want to stab my eyes out XD;
I’ve been ignoring Firebug up to this point for some reason, but…wow….Finding that extra padding always kills me AND my CSS when I’m done with it ;D This Notepad++ looks pretty spiff, too! Maybe I can finally give my good old Notepad a rest~ XD
I think I might be abusing number 7, though…
VALIDATE!
VALIDATE!
VALIDATE!
( Reply )
swank July 17th

Nice stuff, very useful
Thank you Jeff
swank
( Reply )
c-g July 17th

I’ve been developing websites for a couple of years & realized a lot of people is getting into the business everyday so here I am making a research to improve my techniques and provide better products.
This is the kind of websites/posts which really help, thank you so much!
~ By the way, I just passed #13, installed the add-on and made a quick run to this site and… OOOPS! seems you do not completely apply advice #5.
( Reply )
Arthur E.B. July 17th

Thanks, Jeffrey! I just started learning HTML. This is really helpful.
I’m doing it on Notepad.exe and it’s great fun. I just installed all add-ons needed.
( Reply )
robb July 28th

really useful for beginners.
simple mistake but deadly.
( Reply )
matzipan July 29th

You can use *html to hide the css class from other browers than ie, but still use the same file.
( Reply )
Seth August 10th

Thanks for all of the tips. They are really helpful and I still need to work on a lot of them.
I’m not really sure if I’m a beginner or not though… I learned HTML back in the geocities days (scary, I know) and then fell away from web design and headed more towards print. Now, I’ve gotten back into HTML and have had to learn CSS, and have done it pretty quick, but there’s always room for improvement.
Oh, and I despise IE6… it’s given me problems right now so I decided I’d take a break and reading this made me feel much better. Alright, back to work.
( Reply )
billige mobiler August 13th

very nice blog.. I like the design, its cool:-)
( Reply )
Free Xbox Live August 15th

Great tutorials! You have a lot of very helpful tips that a lot of users can implement.
( Reply )
Bambang Wahyudi S August 19th

right stuff for me..
thanks..
( Reply )
Jagadish August 24th

I am fucking zero in CSS. But this guy has made my jesus stand up and say good morning to all those crappy chunks. Thanks to this fellow who has provided my dick keep moving the crowd of hard asses.
( Reply )
Jagadish August 24th

Hmm Hmm. Take a deeeeeeeeeeeeep breath.
Guy, this man has almost done a great research and has pointed out the exact things to be done and executed by a normal designer who is not thining about too much of code and at the same time not also readyto mend himseld for future upgradations where he can only think of the best ever possible mode of next generation which is going to come in the next few years undergoing drastic changes where change is the only thing which never changes its position and also thinks of the next door lady where some of the principles are applied totally opposite to the contrary.
( Reply )
web development best practices August 31st

For good design, make sure your site is browser compatible. Your web site should look good in Netscape as well as in Internet Explorer.
( Reply )
Carlos Gonçalves September 2nd

Essential. Now I knew your site, I will visit it a little more…:)
thanks!
( Reply )
Amber Weinberg September 4th

Great list of links. Will def retweet!
( Reply )
Stoian Kirov September 14th

Thanks for all your hard work Jeffrey! You’ve really helped me with all your tutorials!
“These things take forever!” !!!!!!!!!!!!!!!!
( Reply )
Mike September 18th

Good information and I like the design of this web site.
( Reply )
เพชร September 22nd

nice tips
( Reply )
Julie Stoddard September 24th

It’s been a while since I designed websites for clients. Just reading some of your tips makes me feel so clueless now that I haven’t updated my skills and knowledge.
( Reply )
lhoylhoy October 5th

nice guide there! i’m taking notes of these!
( Reply )
Crazy October 13th

Thanks a lot, its helps me a lot!
( Reply )
Rohit Khare October 18th

It is such a nice post. I needed it urgently.
( Reply )
Najt November 8th

Is there any html/xhtml editor which will automaticly make an offset after new tag?? I mean if I write adfadf …. that the tag-title will be automaticly shifted to right. I must always click on tabulatar in notepad++, intype, pspad etc… noone has settign for this options
( Reply )
Thank you. November 10th

Thank you. I appreciate your time and effort on this article.
( Reply )
Angie November 19th

This was, in a word, life-changing.
I am cool, hott, designer chick just getting into the wide-world of CSS, HTML, and male computer nerds…loving every minute.
Thanks for the great info and entertaining read.
Really valuable stuff.
( Reply )
Keiy November 29th

You must have mastered html code. Thanks for this, I always find that tuts like yours is very useful for me since I like coding.
( Reply )
hadi December 1st

I like Jeff because I will be training with images and I’m Iranian and I’m not speak English this is very valuable.
( Reply )
Jaspal Singh December 11th

Great tutorial.
Thanks for sharing.
( Reply )
Alan Takushi December 17th

A nice extensive list that I’ll come back to from time to time (always good for review and to refresh and eliminate those brain cramps).
When I’m waking up with the morning sun and still coding strong, it’s a great feeling…
( Reply )
Connor Crosby December 28th

Wow, thank you so much, very helpful list!
( Reply )
Shruti February 4th

Its good tutorial of bigginer , i leared many of new things and rule for css and html
( Reply )