Complete Guide to Web Construction/Design

A Complete Guide to Web Construcion/Design

Starting your Journey in Website Construcion

How I started my Website Construction Journey
When I was 7 I learned HTML, yes 7, it is a really easy language but it provides you with the skills to create the foundations of a great website, I don't really know any programming languages (maybe a little VB) because I focused on web design. Then I decided that I would rather play video games than learn how to create websites, which is not a suprise. So 13 years old I decided I would like to create a nice looking website, but I only knew HTML and I knew that HTML alone was not enough to create a good looking website. So what did I do? You hear it all the time, I checked Google, I found a really nice website called W3Schools, it is the one that you are going to be using although it has been updated since I used it, anyway I am getting ahead of myself. So, I am 13 and I decide to learn JavaScript becuase my friend knew it and he showed me a few tricks on his website that I really liked, for example he created a script where you enter your name, and hit submit and it would display "Hi, Yourname. Good morning/afternoon/evening" depending on the time on your PCs clock. Which I though, and still think is a nice feature and this can be used in buisnesses, your customer will feel more welcome and therefore hopefully will buy a product from your website rather than someone else. Yet again I am getting ahead of myself. From the age of 13-14 I got hooked on web design, I learned CSS, Advanced Javascript, AJAX and Flash. Now, I have a good understanding of PHP and I own my own web design buiness, I have 3 employee's and I make a nice income, not life changing money but its better than working at the local McDonald's.

Do you really want to learn?
Web design languages are easier to learn than programming languages but that does not mean that they are easy. They are fun to learn but some get confusing, if you really want to learn make sure you follow the below guide.

• 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

Ok, if you are prepared to follow the above bullet points, I have created you an action plan, follow this and you will have a good website within a year.

Action Plan
1. Learn HTML - Use http://www.w3schools.com/html/DEFAULT.asp
2. Learn CSS - Use http://hackforums.net/showthread.php?tid=58412

Ok now you should have the skills to create a GOOD, PROFESSIONAL looking website. So, now you should create a website.

3. Learn JavaScript and add some nice interactive features to your website - Use http://www.w3schools.com/JS/default.asp

Now you should have a really nice looking website, with some nice interactive features, once you get some users you will want to think about learning the following.

4. Learn AJAX to create some nice web applications - Use http://www.w3schools.com/ajax/default.asp
5. Learn PHP and create a forum for your website - Use http://www.w3schools.com/PHP/DEfaULT.asP

Now you have a successful website, congrats. You will be able to sell ad space, sell products or whatever on your website and you will be able to make a nice income.

6. (Optional) Learn Flash to add some REAL nice effects to your website - Use http://www.w3schools.com/flash/default.asp FIRST and then use http://www.newgrounds.com/collection/fla...rials.html when you get better.

Achievments
Ok a year on lets see what you have achieved:-

*A website with active users
*The ability to create great websites
*A good income from ads
*You know 5/6 languages

That is quite a lot to achieve in a year.

Good Web Design Practices and Tips

1.Sense of Flow or Openess
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.... they are annoying.
• 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 (W3school has 2 broken links on there website here)
• Add a customized Error404 page (more information here)

2. 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 to server with programs like these for Windows: HVS GifCruncher and JPEG Wizard and for Macintosh: GraphicConverter.
• Compressing your files before uploading to server this will decrease the overall disk space used by your file
• Avoding cumbersome background images(this also usually gives a more proffessional look)
• Optimize 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(Flash is a no-no when trying to avoid large loading times).
3. Secure and Test your website always

Tips To Testing your website

• Ask Friends, split up the work (especially if the websites large).
• Make sure to test your website more then once you may have accidently done something to cause the page to stop functioning correctly.
• Follow links that lead out of your site, the website's owner or host may have brought down the site. (Useful Tool for checking links)
Why Secure your website?

Securing you site's documents,images and database is extremely important because of 3 major reasons
• User's will not trust you enough to give information about themselves.
• This stops Hotlinking, 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 Hotlinking
• 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

Quicker Page loading time

• If you are using CSS that can be properly organized without putting to much effort, use an internal style sheet(s) they are faster. Also, they its easier to edit with php if you need to make multi-browser compatible webpages.

• 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 W/ Safety Articles
Search Engine's are possibly some of the most used tools on the internet, they are extremely usefull tools they allow you to search for answers to a qeustion, find restraunts, look up youtube videos and many other things. This is how you can raise your sites popularity with search engines.

Some General Tips To getting your website listed
(For Buisnesses or Groups)
• 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 recieved. It will allow you to watch the amount of users who have used your website ext...
• After Signing up for this service invite friends from other websites or in real life to visit your website, not only may you recieve new users but you will recieve more individual IP's (boosting your Google Rank).
• Find ways to advertise your website via other website (ads,links), make sure these websites have a good rank. This will meen everyone from google looking at the other site will also see your site.
More on Articles below

Promote Yourself On Google
Promote Yourself On Google 2

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 hotlinkers/dowload bots/hackers.

Learn how you can limit search engines searches by reading this.

Help! I'm stuck.
If you want any help or you have any questions or need me for anything (even just a chat) you can Email me.

Copyright Info
If you would like to modify or repost this tutorial on any other forums then you must email me and ask permission first. Don't leech, its only fair.

Contact Info
I can be contacted Via
Email: joelf2110@googlemail.com
MSN: joel_f07@hotmail.co.uk

As always, feedback, comments and criticism are greatly appreciated.