Website Construction: A Complete Guide

[-Infectious]

Very Nice tut! HQ!

---

Note: I wrote this tutorial for a different forum (where it was stickied) a couple of years ago. I recentely updated it and shortly after all stickies on said forum were removed, as new ones were selected, my tutorial is no longer a sticky. Due to this, I feel that it would be benificial to post it around a few other forums, so that more people can (hopefully) benefit from it. This is my tutorial and it is orginally written by me, if you look at my username history on any forum you find this posted on, you will see that at one point my name was "Holy".

Website Construction: A Complete Guide

Thanks to Champloo11 for his large contribution, the tutorial would not be the same without your ideas.

This guide underwent a major update on 12th May 2011, it will now be regularly maintained and amended, if you spot any problems with the guide please post them in a reply and they will be looked at. Thanks.

How to Use This Guide
This guide is not a bible; it will not give you the top ten secrets to web construction and it will not turn you into a professional overnight, to be blunt, if you are reading this with the assumption you will have a web design business tomorrow, you should probably hit the back button. That said, this guide will help you, as it has helped others before, start out in the web design industry and help you get on your way to being a success.

Why Web Design?
The web construction market (like many) is growing rapidly, it is becoming more and more essential for businesses to advertise and sell products online and as a result of this the demand for web designers is rising. This guide will look at not only the technical aspects of web construction but also the business side, and how you can begin to make money from what is potentially your new profession. That said, this guide is not specifically aimed at people who want to go into a web design career, it should be helpful to anybody interested in the subject.

Do you really want to learn?
Attitude makes up a good percentage of learning about web construction, you need to enjoy learning, there really is no point learning a multitude of language if you find it boring and uninteresting. Learning shouldn’t be a chore, it shouldn’t feel like a job (even if it is your job). Web languages are perhaps not as hard to learn as programming languages but that does not mean that they are easy. I feel they are fun to learn but some get confusing:

• Don't give up, if you don't understand ask for help
  
• Learn 1 language at a time
  
• Getting users on your site takes time
  
• Your website will get better as time goes on
  

Action Plan
Before the update, I said that this should take about a year. I wish I hadn’t. Since I wrote the guide nearly two years ago my opinion and knowledge of the way that people learn has changed greatly. It doesn’t matter whether it takes you days, months or years to follow this action plan, go at your own pace, don’t try to cram everything in as quickly as possible or you will not learn the languages, you might think you know them but you will find yourself stuck very often when actually dealing with a client.

Note: Before learning any languages you should learn how to use Photoshop comfortably, you will need it to create website mockups before converting them (manually) to code and images. If you are not comfortable with Photoshop, read the help documents and master the user interface, an old friend of mine; Codeking, taught me that anyone can be a professional in Photoshop, you just need to master the UI and you can do whatever is in your head.

1. Learn XHTML - It’s cleaner and more semantic than HTML, just jump straight in and you will be surprised how easily this language can be picked up.

2. Learn CSS - Use http://www.w3schools.com/css/ followed by http://css-tricks.com/ (I would suggest visiting this website often to keep up on the latest CSS standards).

These two languages alone will allow you to create a great looking website, in fact, it is arguable that anything beyond these two languages is somewhat a waste of your time. I don’t fully agree with this point, but I will list the remaining languages I recommend as optional.

• Javascript, with a specific focus on jQuery
  
• AJAX
  
• PHP (or Ruby on Rails)
  
• ActionScript 3.0 (Adobe Flash)
  

Note: It is nearly impossible to memorise an entire language, and as a web designer you are not expected to. You are expected to be able to create a good-looking, functional site without any trouble. However, this does not mean that you cannot use a reference to look up code that you need clarification on, and in my opinion it shows initiative. WH Encryption has shared a great reference for (X)HTML and CSS at http://htmldog.com/ - I would recommend taking a look.

Good Web Design Practices and Tips

Sense of Flow or Openness

One of the biggest challenges that many web designers have is to make their website attractive to the eye, so potential users don't leave as soon as they enter the website because the design is horrible.

Tips for good website flow and feel

• Don't make a thousand different pages that your user has to click through before finding what he/she wants to find.
  
• Don't use JavaScript alert messages.
  
• Avoid using flashy ad's they can draw attention away from your site and be a nuisance to users.
  
• Make your content easy to read, don't make your users squint in the same regard don't make your text to big.
  
• Use professional looking images (transparent PNG images give a nice feel)*
  
• Remove broken links.
  
• Add a customised 404 error page (more information here)
  

*Etheryte, a respected and intelligent user suggested:
“Actually, using transparent .png-s is a bad habit, it's much better to slice up your webpage right and have every image have a full background. The reason for this is that some browsers (mostly that means outdated ones) have trouble showing transparency correctly. A potential customer is a potential customer, no matter how old the software they use.”

The transparent PNG situation is simple in my opinion, use them or don’t and be consistant. If you are starting a web design business then it is probably a good idea to use transparent PNGs if they are going to give a better look and feel to the website, don’t put them in for the sake of it.

Optimizing Pages for Smaller load time

When designing a web site it is very important that your user doesn't have to wait long periods of time for a page to load or they may eventually leave.

Ways To decrease load time

A few ways you can decrease your web sites overall load is by

• Compressing images before uploading, this can be achieved with the “save for web and devices” function in Photoshop. Compressing your files before uploading to server this will decrease the overall disk space used by your file.
  
• Avoiding cumbersome background images (this also usually gives a more professional look).
  
• Optimise your PHP/ASP/JavaScript so that it will take up less space while still accomplishing the same task.
  
• Using CSS when mass code is needed (such as large tables).
  If you need to insert a large navbar/body image you can avoid excess loading by:
  • Breaking up the images into several smaller ones this decreases load time because it allows multi-threading.
    
  • Removing any Flash if it is not essential.
    

Secure and Test your website always

Tips for Testing your website

• Ask friends, split up the work (especially if the websites large).
  
• Make sure to test your website more than once you may have accidentally done something to cause the page to stop functioning correctly.
  
• Check external links regularly.
  

Why Secure your website?

Securing you site's documents, images and database is extremely important for 3 major reasons:

• User's will not trust you enough to give information about them.
  
• This stops Hot linking, Rogue Bots and users from stealing your bandwidth.
  
• If you have private information on your server/database it is important you keep it private.
  

How do I secure my website?

There are Several articles on this forum and below are a few other ways.

• Stop Users from getting a directory listing
  
• Stop Hot linking
  
• How SSL works and whether you need it
  
• What is XSS and how do I protect my website?
  
• 'Secure' File Uploading
  
• Ways to be secure with PHP
  
• How to ban with HTACCESS
  
• Help Prevent Spammers
  
• Prevent MYSQL injections
  

Features that will Improve your Website even further
Improving your website is extremely important, it doesn't matter if you get 10 or 10,000 views a day, the better your website is and looks the more people will want to use it. For example, why do people use Google? Well, it is an effective, fast search engine that does exactly what it says on the tin. It is also nice and simple so people who are new to computers (or the Internet) can use it easily. The following few tips are sure to improve your website and therefore gain more traffic.

Quicker Page loading time
If you are using small amounts CSS that can be properly organized without putting too much effort, use an internal style sheet(s), they are faster. There should only be one external stylesheet unless there is a specific need for multiple. If you have extra time to spare working on your site, and several images you can increase your website load time by pre-loading images with JavaScript. This allows the website to load the images during the HTTP request instead of after.

More Ways to Increase Website Flow
If you are a skilled coder, a way to increase website flow is by adding an in-sight search engine. This allows users to access information they are looking for without having to search the entire site. If you do not have the programming skills required to build and structure a website search engine you can make a site map. Sometimes users get lost within the content of your website and they want to start over, give them that ability by putting links on everyone of your web-pages that leads back to the main page or the site-map.

Search Engines
Search Engines are the most used tools on the Internet, they are extremely useful and allow you to search for answers to a question, find restaurants, look up YouTube videos and many other things. Therefore having your website put onto as many search engines as possible is essential for bringing in traffic to your website and potentially making money of these users.

Getting Listed

Google has a FREE service that allows you to sign up your web site called Google Analytics when you have registered it will give you a code to put at the end of your WebPages code, this will allow Google to Track the amount of hits you have received. It will allow you to watch the amount of users who have used your website etc. After Signing up for this service invite friends from other websites or in real life to visit your website, not only may you receive new users but you will receive more individual IP's (boosting your Google Rank). Find ways to advertise your website via other websites (ads, links), make sure these websites have a good rank. This will mean everyone from Google looking at the other site will also see your site.

Protecting your websites files/stats from Search Engines

Search engines are great.. but without specifying what links you do or don't want the search engine to follow you can potentially lead traffic away from your site. Also, if you forget to tell search engines not to list a directory of files from your website it will and this can lead a potential security risk to hot linkers/download bots/hackers.
Learn how you can limit search engines searches by reading this.

SEO - Search Engine Optimization
"According to a recent study, more than 60% of websites lack the proper web programming to be ranked properly by Internet search engines."
The following steps aim to take your site out of that 60% and bring it into the 40% of websites that do have the proper web programming to be ranked properly by Internet search engines. The sites in this 40% are the successful websites like MySpace, Facebook, YouTube.

Know your target audience
This is an essential step to optimizing your website, I cannot stress enough how important this is. A quote from http://textlinkbrokers.com will confirm this:
"...Your target may be a 30-45 year old female, in middle management, who drives a mini-van and takes her 3 kids to school before she goes to work. She makes $45,000 per year and has a bachelor's degree in finance. This is the type of detail you need..."

Your target may not be individuals; you may be targeting businesses to sell your stock to, for example my mother owns a florist in my hometown and she gets her flowers shipped from Holland every morning. But when she first started off their were over 15 of these suppliers offering their services. She did some research and found a suppliers website from a search engine, the content appealed to her so she decided that she would use this supplier. They didn't have the lowest prices (although they are very good) but their website made her feel welcome and when I talked to her recently about what made her choose that supplier she said that she felt like the content on the website was aimed at her, not everybody. Anyway, enough ramble, time for step 2.

Keywords
Your keywords are so important to your website, they are the foundations for the search engines finding your website, because of the importance of this I find that it is more effective to use some tools to find your keywords instead of thinking of them off the top of your head. A great tool to use is Google's Keyword Suggest Tool (found here: https://adwords.google.co.uk/select/Keyw...External). I recommend using the first option, enter a word or phrase and let Google generate keywords for you. Do this and wait a few seconds for the results to appear. When they have appeared click on "Local Search Volume: [month]" now your list is in order of the most searched words to do with your phrase that were searched in your county last month. (Try saying that without breathing.)

The following was written by Rob Sullivan on Sep 19, 2005. I take no credit for the following:
“Once you have a huge list of words, the next place to go is a site like Wordtracker, (http://www.wordtracker.com/) which has a keyword analysis tool. This tool can be used for a one time fee, or if it's something you might want to return to you can purchase a subscription. It is a fairly simple tool to use and will give you a good idea of just how likely your site will be able to compete for a phrase.
A warning about Wordtracker: The software uses search volumes from some fairly minor sites such as Dogpile, so the estimates could be a little skewed. But again, unless you deal with an SEO firm that has their own proprietary software, this is about your best alternative.
Also remember as you are culling your words, don't just focus on the competitive factors. These won't account for your target audience. Therefore you need to have that picture in your mind of the target as you are selecting phrases that they might use. If you are unsure, you could always ask for help from friends and family that fit the target profile.”

Your Content
If you have already written your content, do not attempt to re-write you whole website, just make sure that you add key phrases to each page.

It is recommended that you keep the content on each of your web pages from 400-600 words. Obviously going 50-60 words over or under this range is not a problem but if there is too little content on a page it looks bare, blank and bad. If there is too much writing a lot of people will look at the page, say to themselves "I'm not reading all that" and find another website. So it is recommended to stick to these guidelines unless the page requires a lot of text (EG a tutorial like this, a terms and conditions page etc.)

When writing your pages make sure that you include a key phrase 2-4 times, don't make your page sound weird by repeating the same phrase 10 times, people will think that you are trying to gain more customers (which to be fair, you are) but they will not feel valued and again find a different website. Also, make sure the content on each page is appropriate for the target audience, for example:
"Wassup Homies.
Check da new shizzle on da product pages for some fresh t-shirt.
Fresh t-shirts.
Fresh t-shirts.
Fresh t-shirts."

This would not be appropriate for any audience, naturally. I know this is an exaggeration but I think you understand what I am talking about.

Optimise your META
Before I start, if you don't know what a meta tag is then you need to go over the HTML tutorial at the start of this tutorial again. Meta tags are important to your website being found in search engines. The first and second-most important meta tag to fill in is the meta description tag. This should be a few hundred characters (200-400), maybe just a couple of sentences that explain your website. Make sure this includes your keywords and phrases.
You can also choose to fill in the meta keywords tag. None of the major search engines use this anymore but some smaller search engines do, and as mentioned before a customer is a customer no matter what services/software they use. You can add as many of these as you like, they should be in the following format:
"red green blue cheese virtual dj software"
It's just like adding tags to a YouTube video, if you have ever done that.

Meta Title
This is left separate because it is the most important step in SEO; this is the title seen on the results page of search engines, for example on http://www.google.co.uk/search?q=flowers we see a page of results. Look at them and which one jumps out at you, for me it was "Flowers UK - Flower Delivery by Flowers Direct UK - Buy Flowers Online." This is a very optimised title, perhaps optimized too much, but you can begin to see my point. The word "flower" is repeated 4 times in the title. You should aim to repeat a key word in your title too, if you are stuck for a title, below is a good structure.
"Cheap Keyword Online - Buy keyword at Low Prices"
I came up with that in seconds, so it would be a good idea for you to try and be a bit more creative, but if you are stuck you are welcome to use that structure.

Summary
"...In the end, the more you know who your customer is, the better you will be in all your online ventures, from introduction of your product or service, to closing the sale. It is up to you to cater to them, and not force them into a more generic mold. This is because today's web searchers are much more savvy and willing to browse more if a site doesn't appeal to them..." - Rob Sullivan

What do we have now?
Take your fingers of your keyboard and look at your website. You have achieved something amazing, you have a perfect website that in a few years may be contending with the big sites like MySpace, Facebook, YouTube, eBay. This may sound like an exaggeration but I guarantee that it is not, every site has to start somewhere and you have now started your journey.

What if my website doesn't take off? What else can I use my skills for?
You have learned some valuable skills that can only help your career, if your website didn't work for whatever reason, don't worry. It takes a lot of time for a website to get popular unless it is very unique, the chances are you just had too much competition from larger companies. For example, if you started a social networking site you would have to compete with quite a lot of big companies that are already out there - like MySpace, Facebook , Bebo ect. So it would be very hard for your website to succeed. Anyway, if you don't want to change the topic of your website, or make a new one you can off-load your website by selling it (there are some websites that will buy it off you, they can be found by searching Google (As I am writing this I don't have internet access so I cannot give you an exact link)) or giving it away to a friend who also has good web design skills. Now you may want to become a "freelancer".

This means that you will be paid by people to do jobs based around web design, construction, article writing, scripting and more. Don't worry if you are not good at all of these, the chances are you will find something that you are good at especially if you followed the action plan in the first section of this tutorial.
It is completely free to be a freelancer, all you need is the skills and the drive to do something different, and so I suppose you are wondering how to get started. There are many
services that offer you that change to become a freelancer, below are just a few:

Code:

http://scriptlance.com
http://elance.com
http://getacoder.com
http://getafreelancer.com
http://guru.com
http://ifreelance.com

But personally, I would recommend you use http://scriptlance.com, at least since you don't yet have any experience as a freelancer. This website is simple to use, instead of registration fee's like some other freelance websites they make their profit by taking a small percentage of your earnings, this is hardly noticeable unless you are dealing on a scale of thousands of dollars, in which case you won't mind anyway.

Once you get to the site register for free and look at some job offers! You bid the price that you want to be paid for the job - but people prefer people with more experience than people with no experience and just the lowest bid, so keep that in mind.

When your first start on these websites it is hard to get jobs, as I mentioned above because people prefer to use people with more experience as a Freelancer. I would recommend that you do some article writing jobs to start off with, just so that you can gain a reputation before moving on to larger jobs like coding and web design.

Protecting your Website via Copyright
One of the worst things that can happen to you in the web design business is somebody else copying your website and claiming it as their own. This is unfair and the people who do this obviously have no skill in web design. This also includes people making phishing copies of your website, if people are scammed by these phishers they may think that it was your website that took their details and then you could gain a bad reputation and possibly lose a lot of money.

To protect against this you should try to put a copyright licence on your website. I know of two websites that allow you to do this for free, http://myfreecopyright.com/ and http://creativecommons.org/, personally I prefer http://creativecommons.org/ but you can use any. I will give you a brief description on how to use http://creativecommons.org/ to get a free copyright licence for your website.

First go to http://creativecommons.org/license/

Then select the options for your licence, these are completely up to you.

When you are asked the type of content you are copyrighting, I recommend using "text", but if you would like to use another content type this is fine.
You will now be given the HTML code to paste into your website, once you have done this you are somewhat protected by copyright.

Getting Web Hosting and a Domain
Now - this can be a very simple process or it can be a very compliated process, hopefully reading this section of the tutorial will make it a simple process and your website will be up and running with a professional looking domain for a cheap price in a matter of days, if not overnight. I strongly recommend that you pay for your web hosting - it is faster, more reliable and you get a lot more features. If you really can't afford to pay for web hosting there is an alternate way - it is possible to get free web hosting but it is not as good as the paid hosting. I would recommend one of these two hosts if you are going to use a free host, http://000webhost.com which is owned by Hosting24 or http://byethost.com which is equally a good free host. One problem with free hosts is that you do not get a domain with them, you get a sub-domain but to be honest they look unprofessional and tacky.

There is a way to get free domains but these domains are not the popular domains such as .com, .net, .org etc these are domains like .tk, .co.cc, .co.nr, they don't look too bad but I'm sure that you will agree with me when I say that they don't look anywhere near as good as the top level domains. You can get these free domains from a lot of places on the internet, below are just a few:

.co.nr - http://www.freedomain.co.nr
.co.cc - http://www.co.cc
.su.pr - http://www.su.pr
.tk - http://www.dot.tk

There are many more than can be found with a Google search - I won't list them all here.

Contact Info
Contact me with any questions, problems or if you have made a site with this guide and want to show me, you can contact me with by the following methods:

E-mail: joelfrost4@gmail.com
PM me on SupportForums, or whatever forum you may be reading this on.

As a general guide, if you need a fast response email me, as I check them everyday, if your matter is not so urgent PM me, I may take a few days to reply.

But as much as I appreciate your kind comments and feedback, please post them as replies to this thread instead of contacting me about them, I assure you I read all comments left and even if I don’t reply to them I have read them and I am grateful that you have taken your time to comment.

If for some reason you cannot contact me, the following may help you:
1. Use a Search engine.
2. Find a Community of programmers/developers.
3. Ask friends.
4. Find a book.

Summary
Thanks for reading my tutorial, once again I would like to thank Champloo11 of DaemonF Studios LTD for their really helpful contribution.

Copyright Information
If you would like to modify or re-post this tutorial on any other forums then you must email me and ask permission first. Don't leech, it’s only fair.

Again, very nice!