Today’s tutorials are especially for those who are just diving into web development. If you have minimum one year knowledge or less, hopefully some of the tips listed here will help you to become better and quicker. The most complicated aspect of running Nettuts+ (where is source which we posting here) is accounting for so many dissimilar skill levels. If we post too many superior tutorials, our beginner spectators won’t benefit. The same holds true for the conflicting. We do our best, but always feel free to pipe in if you feel you’re organism neglected.
Notice how the wrapping UL/OL tag was absent. Additionally, many chose to leave off the closing LI tags as well. By today’s standards, this is just bad practice and should be 100% avoided. Always, always close your tags. Otherwise, you’ll encounter corroboration and malfunction issues at every turn.
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.
Most of us choose between four dissimilar doctypes when creating new websites.
There’s a big discussion currently going on about the correct choice here. At one point, it was measured to be best practice to use the XHTML Strict version. Though, after some research, it was realized that most browsers relapse back to regular HTML when interpreting it. For that reason, many have selected to use HTML 4.01 Strict instead. The bottom line is that any of these will keep you in check. Do some examine and make up your own mind.
3: Never Use Inline Styles
When you’re hard at work on your markup, sometimes it can be alluring to take the easy route and sneak in a bit of styling.
Instead, finish your markup, and then reference that P tag from your external stylesheet.
4: Place all External CSS Files Within the Head Tag
Technically?, you can place stylesheets wherever you like. Though, the HTML requirement recommends that they be placed within the document HEAD tag. The primary advantage is that your pages will apparently load faster.
Remember – the prime goal is to make the page load as rapidly as likely 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 development.
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 completely a best practice.
Another ordinary practice years ago was to place JS commands straight within tags. This was very ordinary with simple image galleries. Essentially, a “onclick” attribute was appended to the tag. The value would then be equal to some JS method. Unnecessary 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 preferred event. Or, if using a framework like jQuery, just use the “click” method.
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
9: Use Firebug!
From my experiences, many users only take benefit of about 20% of Firebug’s capabilities. You’re truly doing yourself a disservice. Take a couple hours and scour the web for every commendable tutorial you can find on the subject.
Admittedly, this is something I tend to relaxed on. It’s best practice to use all six of these tags. If I’m honest, I frequently only execute 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.
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 errand of the latter method.
As with anything, decide what’s best for your own website. Though, 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
Particularly 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 examine the given website and return a “report card” of sorts which details the areas where your site needs enhancement. It can be a bit harsh, but it’s all for the greater good. I extremely 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:
You’ll certainly find yourself screaming at IE during some point or another. It’s actually become a bonding knowledge 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 orientation it only for IE by using the following code.
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:
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.
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.
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.
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.)
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.
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.
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: 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.
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.
28: Don’t Use a Framework…Yet
CSS frameworks are for experienced developers who want to save themselves a bit of time. They’re not for beginners.