First things first, a clarification:

• Client Side: code that is executed by the client’s (user’s) browser, like HTML, CSS, JavaScript, and the likes. You can see the source code of client side languages.
• Server Side: code that is executed by the server and sent back out to the client in the form of HTML/text, like PHP, Ruby and ASP. You can not see the source code from your browser. This article will not deal with server side languages.

This will be all about the client side languages. Mainly (x)HTML and CSS. I will also be assuming you have no prior experience, and have no idea what either are. Please also note, this is not a tutorial on how to make a web page, rather a guide from one experienced person to someone wanting to learn how to learn, essentially.

The Hyper Text Markup Language

HTML stands for just that: Hyper Text Markup Language. When you put an X infront of it, it stands for eXtensible. The first thing that comes into your head might be, “I’ve heard of this, but what does it have to do with a web site?“.

The answer to that is simple. All web pages output HTML to the browser, which is then read by the browser and outputted to your screen accordingly. Simple, right? All you need to know is that if you want to have a page on the internet, you will use HTML. Whether you outsource the coding and don’t know a thing about it, you still need it.

HTML is like the air we breathe for the web.

Next, with these two seemingly identical ‘languages‘ there must be some differences besides on letter. Of course, there are, but before I can get into that (for now it’s over your head) you need some resources. These links will put you on your way to mastering the most basic of all web languages:

• Basic HTML Tutorials from Pixel2Life
• Your HTML Source (Excellent!)
• XHTML Tutorial Series from W3 Schools

Look like a small list? You don’t need any more than that! It’s that simple. Hopefully you understand.

Cascading Style Sheets

CSS isn’t just a game, you know, it’s what makes websites look the way they do!

For anyone completely new to CSS, I like to get them to do this. This is for Firefox users, and if you aren’t one, then become one I’ll also be touching on the cross-broswer issues of today later on. Anyways, here’s what to do:

1. Go to any website. You’re reading this on one right now, so head to #2.
2. Up top, go View > Page Style and click No Style.
3. What happened!?!

You just saw the affect CSS has on web pages. XHTML isn’t to make websites look good, its just the markup. The canvas, if you will. CSS if the paint. CSS styles web pages using a variety of different methods, and to understand this, here are some more resources:

• Your HTML Source Stylesheets (Again, excellent resource)
• Pixel2Life Basic CSS Tutorials

That’s all you should need, really.

HTML + CSS + Web Browsers

When I said the browser outputs HTML accordingly, I meant it. Different browsers will interpret CSS and HTML differently than others. This is an ongoing issue in the web development world, and always will be, mainly for one reason: Internet Explorer. Firefox and other browsers such as Opera, Safari, etc… display CSS more as intended than IE. It’s like IE tried to fix things it sees wrong.

The problem? Your website may look perfect- just as intended- in all broswers, but when you come around to IE things are misplaced, broken and dithered. This can be very discouraging, so it’s important to remember some things:

• There is usually one solution to a problem, but don’t kill yourself finding it.
  
• HTML ‘if statements’ (conditional comments) can help you to use browser dependent style sheets. Read about it here.

XHTML vs HTML

The differences between the two will be seemingly non-existent or minimal at first, but if you do a little bit of research, you will start to see some differences. This article from W3 Schools outlines one differences, and is a good read for beginners.

Essentially, XHTML is a stricter version of HTML. Today, XHTML is used on the more modern and web-savvy sites. In normal HTML you are likely to come across tables for layouts, animated GIFs and the like, whereas XHTML users are more likely to promote validity and accessibility. All with tons of exceptions of course.

What can these two do together?

A great way to conclude this is to show you a series of websites named CSS galleries. These sites gather the best looking websites from all over the internet that make use of CSS and XHTML properly. Here’s a few good ones:

• CSS Zen Garden - Shows the true potential of CSS. Users submit CSS files to style one HTML file that does not change. Everything must be done with CSS.
• CSS Remix
• CSS Import
• Screenalicious - More basic, but still worth a look.

One of the hardest things about web design is getting over the first hurdle. Making your first design is one of them, and making it come to life is equally ground breaking for someone new to it all. As someone who has been through many websites in all kinds of levels, all kinds of techniques and styles, I’d like to share what I think is the best way to go. The following tips are mainly general and might not work for everyone but remember- you can succeed in this. You just have to give yourself and your talent a shot.

Take good advice.

When you come across articles like this where someone is offering advice and tips based on experience, read up. Be a sponge. You can never know enough in the web design world. Even the seasoned gods of web design learn new things everyday. Design is a funny thing. You can be from varying talents and techniques and everyone will always come up with a different design, and a different opinion on this:

Your overall skill to design (websites) is a mixture of pure, god given natural talent that can not be learned and the things you can learn, like the tools, techniques and tricks.

Finding your talent and a balance between the learning portions is important. You can’t just walk into this, unfortunately. If you’re the most talented designer this world has ever seen, you’re nothing without your tools. Photoshop (or your weapon of choice) is like a language. A language to communicate your talent and ideas with. Someone who comes to a foreign country with a Ph. D. can’t use their education without being able to speak a word of the language, can they?

So, how do I go about gaining these skills? Well, the aforementioned parts of design that you can learn are widely available on the internet. There are many ways to learn design. The way I went about it was back in the Photoshop 7 days, I would toot over to Good-Tutorials and soak up every cool looking technique I could. Abstract waves, grunge buildings, bubble gum text, you name it- I could do it. But how has all that helped me today? I actually couldn’t do that today if you asked me to. All that helped me learn Photoshop.

I may not be able to create amazing fantasy art work with all glowing and amazing effects, but 100% I am more comfortable with the Photoshop interface and all things associated. Shortcuts, options, panels, windows, I know it all. The only way you can know it all is by just doing it. Here’s a simple quote:

Just do it. - Nike

Now, it may seem cliche, but think about it. You can manufacture experience by just doing it. Make the coolest looking desktop around, and some awesome forum signatures. Learn how to use renders and popout signature effects. Join a graphics community. This all may have nothing to do with web design, but like I said- you can’t just walk into this.

Today when I see a bad design, and I mean realllly bad, I can assume one, or even both of the following things:

1. The person has not used Photoshop a day in their life, and this is what they can do. It’s their limit.
2. They have no design eye. They don’t have that talent.

I’ve been constantly referencing Photoshop here, but that’s only because Photoshop is my tool. Photoshop is my weapon of choice. It may not be yours- and thats perfectly fine. Fireworks, GIMP, paint- whatever. In the end we can all admit that it’s not how you do it, it’s what you do.

So after all this, and you’re into the entire graphics thing, and you can do all this nice stuff, and most of all you’re comfortable with your tool- it’s now time to dip your feet in the water.

First things first. Basic stuff to set up your document.

• Size: Around 1000×1000 is where I always start. 800×600 users obviously don’t care much about how a site looks anyways, right? Also, you’ll find in this market especially, the average user runs 1280×1024.
• Colour: RGB colour. Safest way to go when dealing with the web, and dithering problems for IE users (*spits*).

Alright, great, so now you have this huge blank space. This is where you explore your own creativity, but here are some common mistakes:

• Alignment: If things don’t line up, your design probably won’t look right. Structure is key. If you have to, create a ‘wireframe’ first. This is when you make little outlines of where every element will go before adding an colour, etc…
• Colours: When starting, try to stick to a one colour scheme. It’s best to not add more, because early on it gets a little messy. You’ll be surprised how fast you’ll find how colours match and clash, and even how it applies to clothes, paint, etc…
• Effects: While gaining the first little steps and getting them under your belt, feel free to go crazy with brushes, effects, renders, anything. You’re not going to walk into ‘web 2.0′ on your first day.

Your style is something that will develop over time, and will progress as well. If you’re not one with that talent, or eye, don’t worry about it. It’s not one of those things that you really see in yourself, but something that comes out and is quite obviously there.

You should be on a good path by now, but remember, all the things mentioned here won’t take you a day, a week or even a month for that matter. Give it time. Your designing is like a plant. It needs to grow. With proper nurturing and attention it will sprout up no problem, and people will notice it I leave you with this:

Respect your inspiration

Basically means don’t steal from those you look up to.

Step 1 - Remove Spyware and Viruses
Viruses and any form of spyware are the biggest cause of slowing down a computer. It is crucial to run spyware and antivirus software weekly. A great program for getting rid of spyware is a program made by Webroot called Spy Sweeper. Another great malware remover is spyware doctor. For antivirus software I recommend AVG Antivirus, which is absolutely free.

Step 2 - Perform a Disk Clean Up

• Click start in the bottom left corner, then click run.
• Type, “cleanmgr.exe” in the text field.
• Press “okay”. This can take a while if you have never done it before.

Step 3 - Remove Unwanted Software

• Click start, then click control panel.
• Click add/remove programs.
• Highlight any old software you do not use and then click “remove”.

Step 4 - Defragment Your Computer
What this does is it physically reorganizing the contents of the disk in order to store the pieces of each file closer together and in order.

• Click start then click run.
• Type, “dfrg.msc” in the text field.
• Click Defrag to start it.

Step 5 - Make Windows Load Faster

• Click Start, then Run.
• Type in ‘msconfig’ and press enter.
• Click on the BOOT.INI tab at the top.
• Over to the right there will be a box labeled Timeout with 30 in it. Change the 30 to a 3.

Step 6 - Speed Up Processing Time

• Go to Control Panel, System.
• Go to the Advanced tab. Click the Settings button under Performance.
• Select the ‘Adjust for best performance’ radio button, then Apply, and OK.
• The graphics aren’t as flashy, but your computer will run a lot faster.

Processor If you are still on a single core processor, now is a great time to upgrade to dual core. With both Intel and AMD having great processors for dual core. Intel has their leading edge Core 2 Duo, and AMD with its Athlon X2. Both these processors are faster than single cores, and much better at multitasking.

Get More RAM If want to run more than one task at a time, you definitely need to spring for more RAM. More RAM means faster load times and smoother running of programs, not to mention multitasking. A single one stick of 1 Gig of RAM just doesn’t cut it anymore, you should definitely go for DDR 2 RAM with 2 gigs of memory. The optimal usage for DDR 2 is with 2 sticks of 1 gig RAM for better performace.

Storage These days hard drives are so cheap that people just buy it because its so cheap. More and more videos, and games take up much more space on the hard disks thats why its necessary to get more storage. If you are an average computer user, just using it for email, music, and work you should have at least 120 Gigs. For people that like to watch movies, and have a huge music collection and like to record TV shows to their computer, I suggest going for the 250 Gigs, and for those that have a vast multimedia collection, 500 Gigs or even more is best.

Monitor CRTs are old school, if you are reading this article on a CRT monitor its time for an upgrade to a nice LCD monitor. LCD monitors take up less space, and don’t cause strain on your eyes. When shopping for LCD monitors, remember that bigger is better. Don’s settle for a 17 inch, I suggest a 19 inch or bigger with a DVI connection for a sharper image. Wide Screen LCDs are much better for watching movies and also give more viewable area.

Graphics Even if you are not a hardcore gamer, you still need to upgrade to a newer graphics card, especially if you want to see yourself using the new Windows Vista operating system and taking advantage of the cool AERO interface. The GeForce 7600GT is a perfect card for under $150, it will take care of being Vista ready and can handle all the latest games. On the ATI side the X1650 is a great buy for also being under $150, and will handle all the latest games.

1. Permalink Structure
   This is a great way to get better visibility from search engines, instead of having a site url of “domain.com/?p=345″, it would rather be “domain.com/05/20/06/google-bought-youtube/”. To change your permalink structure you need to login to your Wordpress admin panel, then go to Options > Permalinks
2. Keywords In Content
   Using keywords in your post title is important, but you also need to use keywords throughout your post. Concentrate on the first paragraph then use variations of your main keyword throughout the rest of your post.
3. Header Tags
   The header tags are used when assigning a title, typically within a post. These title tags are have a numerical value associated with them that also indicates their importance, ie. < h1 > is used for your most important header, < h2 > would be used for a sub title etc. Place the same keywords as used in your post title in the < h1 > tag then use variations of your keywords in < h2 > / < h3 >tags for optimum effect.
4. Install the Meta tag description and UTW plugins
   Head META Description - Optimizes the meta description for search engines to index your site properly.
   Ultimate Tag Warrior - Makes it easier by searching through the tags you made for the posts.
5. Related Posts
   When a person visits your blog you want them to stay for as long as you can. One of the best ways to keep visitors interested is to show them other content on your blog that may be related to the post they are currently reading. The easiest way to do this is with the ‘Related Posts‘ plugin. Upload using your FTP client into the wp-content > plugins folder, then login to your Wordpress admin panel and activate the plugin from the ‘Plugins’ page.
6. Use Sitemaps
   To get the most traffic from search engines like Google it is best to get as many of your pages indexed as possible. Make it easier by installing the Google Sitemaps plugin. Upload into wp-content > plugins via FTP and then activate from the Plugins page. This will then create an XML file that Googlebot can spider and then find all your content. You’ll need a Sitemaps account though where you can register your new Sitemap.
7. Use proper HTML Tags
   Using “Alt” tags on your images and “Title” tags not only helps your search engine rankings, but it also helps disabled people with screen readers view the content on your site. It also can help your page be valid HTML (another thing that can help your SE ranking). I recommend simply describing the link/image and not trying to cram tons of keywords to boost your ranking. For more information on doing this, visit W3C’s site and look up the tag for the version of HTML/XHTML used on your site (if you want it to be valid).
8. Build Backlinks
   To get more traffic you need backlinks. Ideally other blogs will like what you write and link to you, but if you are just starting out and need a little exposure then submit your blog technorati.com. Other ways to get backlinks is via commenting on other blogs and using trackbacks.
9. Ping Other Sites Automatically when you Update your Blog
   Pinging other sites allows other sites to get updates from your blog much sooner and automatically when you make a new post. To have your blog update other sites when you update it, login to your Wordpress admin area, select Options > Writing and copy and paste the links below, under “Update Services”
   http://rpc.pingomatic.com/
   http://www.a2b.cc/setloc/bp.a2b
   http://api.feedster.com/ping
   http://api.my.yahoo.com/RPC2
   http://api.my.yahoo.com/rss/ping
   http://www.blogdigger.com/RPC2
   http://www.blogshares.com/rpc.php
   http://www.blogsnow.com/ping
   http://www.blogstreet.com/xrbin/xmlrpc.cgi
   http://coreblog.org/ping/
   http://ping.blo.gs/
   http://ping.feedburner.com
   http://ping.syndic8.com/xmlrpc.php
   http://ping.weblogalot.com/rpc.php
   http://www.popdex.com/addsite.php
   http://rpc.blogrolling.com/pinger/
   http://rpc.technorati.com/rpc/ping
   http://rpc.weblogs.com/RPC2
   http://topicexchange.com/RPC2
   http://xping.pubsub.com/ping/
   http://api.my.yahoo.com/rss/ping
   http://api.moreover.com/ping
   http://rpc.icerocket.com:10080
10. Spread the Word
    While it may not seem like much, telling people you know can help you build a site. People you know can offer advice on design, topics, etc. and let people they know about your site. People who know you are also far more likely to comment on your postings, making your site look more active, thereby encouraging others to do the same. If you choose to do this step, ask the person to tell 3 other people they know about your site. This will in effect create a small network of people reading and commenting on your site. Plus, if they really like your site they’ll continue to tell others about it.

1. Create a new document, the size doesn’t really matter, however, if it’s a graphic or title you don’t want it to be big, mine is 252 X 65, and make sure to make the background transparent, not white.

2. Create a text layer, with your text, and choose which ever font you desire, then type the text.
3. If you have any other graphic or logo, add it to another layer.

4. After you are done with all that, and are ready to save it, click file–>save for web

5. When saving you are given options, make them look like this:

7. The matte color should look identical to the background color of which the image will be against. If you have a black bg then you should type #000000, for me it is#333333.

8. Save and you are done!

One of the main reasons for a website’s slow download speed is the excessive use of graphics. Therefore, you must try to reduce the number of images and pictures used on each page. Consider repeating the same graphic, wherever possible. This is because once a graphic has been downloaded, it is stored in a computer’s cache and doesn’t have to be downloaded again.

2. USE HTML TEXT

Try to use regular HTML text instead of graphic text, as its size is much smaller. Regular HTML text will decrease your page size, making the download quicker. If possible also try to minimize the use of javascript.

3. USE COMPRESSION TECHNIQUES

Another way to make your website load fast is compressing the images. You can usually reduce a GIF or JPEG image by 40% to 50% without losing any significant definition or sharpness.

4. REDUCE THE NUMBER OF COLORS

To increase the download speed of your website, reduce the number of colors used in the graphics. Using fewer colors will bring down the size of the graphics significantly.

5. HEIGHT AND WIDTH TAGS

Include height and width tags on your page graphics source tags. This will prompt the browser to pre-allocate the space needed for the graphics, enabling a user to see a page more quickly.

6. REDUCE CODING

Spaces and redundant tags in HTML add to the size of files. Therefore, try to eliminate superfluous HTML coding. While scanning your HTML code to check its effectiveness can be a painful task, it can save up to 30% of your download time.

7. AVOID FLASH

Avoid using Flash, unless it is necessary. Usually, Flash files are quite large, and they can significantly increase download time.

8. USE CSS

Use CSS (Cascading Style Sheets) for the website layout. Web pages using CSS are usually much smaller in size than those using tabular layouts. It’s not unusual to see reductions of 50% or more in file size when switching from tables to CSS.

9. USE RELATIVE URLs

Try to use relative URLs instead of absolute URLs if all the pages are on the same server. This will make the file size smaller and reduce page download time.

10. AVOID FREE HOSTING

The server speed of your web site host will influence the speed of your web site’s download. Avoid “free” hosting. Free hosts tend to be oversubscribed and lack the resources to provide fast and reliable servers.
Try 1&1.com, they have great service and very cheap prices.

Digg it

Blog Usability/Content

Before anything, you must have an idea of what your blogs’ content will be made up of. You need to create content that people will come back to read and send to others. Your blog would have to be presentable, not something that was slapped on in three minutes using blogger.com
Your content is crucial for the readers and for the unique visitors. This is basically your whole blog. If you have a tech blog you might want to visit other tech blogs to see what type of content they have and learn from the blogs that work.

Tools for Bloggers

Their are many options for bloggers a great way to is to submit your site to as many blog networks or blog rings as possible. BlogTopSites.com is a good example, they rank your blog by the amount of unique visitors your blog receives.Another site which helps boost visitors is technorati.com, they rank your site by the amount of sites linking to your own site. The higher your rank is the easier it will be for people to find your site by using keywords that you provide when you sign up.

Feedburner.com is an RSS aggregator, which creates a way readers can keep reading your daily new content. They have all of the popular RSS tools and chiclets ranging from yahoo, google, newsvine, bloglines, rojo, newsgator, pluck and much more. They keep track of all the new unique daily readers.

Once you are up and running and using these free tools, you want to keep the look of the site professional, not to mention the name don’t use the blogger.com account name or the wordpress account name. Get a hosting account, and setup a wordpress account from wordpress.org If you want a good list of hosting services esspecially if you use wordpress you want to get a service with PHP and MySQL enabled. wordpress.org/hosting gives a good list of providers.

Submission Sites

Alright, now that the tools of blogging are done you want to get more popularity, more visits, and readers. One of the best ways is to write an article and submit it to digg.com, which is a tech news site driven by the users, if a certain story has enough diggs it is brought to the main page for everyone to see, this is the granddaddy of all the ways to get traffic to your site. If your story gets dugg to the main page you are almost gauranteed atleast 10,000 unique visits. The other site similar to digg is del.icio.us, same here if your site makes it to frontpage the page visits will just keep on coming. You should also submit it to search engines such as google or yahoo, or visit addme.com