you like to build website?

This web tutorial is dedicated to my fellow R.O.P (Regional Occupational Program) students. There are 8 pages of step by step instructions and 15 (plus 8 sub-page) pages of appendices, also there are 8 supplemental pages in the tutorial home page. 8-step instructions are simple; however the principles apply to any web design. I talk about margins, paddings, and borders through out this tutorial because you will use them in almost every design. I included difficult subjects such as block-level, inline-level, selectors, inheritance, cascade, and specificity in this tutorial. You may feel some of the terms are a little bit over your head. That's normal for beginners. Read it over a few days. If you understand these concepts then you should be able to understand any web design article you read. It took me a long time to understand, as a matter of fact I am still learning CSS. R.O.P helped me so much. It is a great place. Enjoy everyone!

Know your Craft

At a minimum you need to be comfortable with both (X)HTML and CSS. Additionally Photo editing tool such as Adobe Photoshop is very helpful.

The web is a big place and there is a lot going on. For example, How does one decide among or between the following; PHP, .NET, ColdFusion ; WordPress, Movable Type or ExpressionEngine; Joomla or Drupal; Flash or AJAX? Let’s not get ahead of ourselves. This tutorial is an introduction to designing your first website using HTML and CSS.

Take your time. 
You may learn JavaScript , PHP, SQL , Flash , Illustrator , Fireworks at a later date. I haven't learned JavaScript yet, however I am using free JavaScripts. It is wonderful to add some dynamic nature. Learning a Content Management System (CMS) such as WordPress or Joomla is added benefit.

Know Your Audience

Users Are Scanners

No matter how much useful information you put into a Web page, a visitor will only spend a few seconds scanning it before they decide whether to leave it or to stay.

Be sure to make your point in the very first sentence of the page with short paragraphs and interesting new headers all the way down the page.

Less Is More

Try to keep your pages as short as possible.

Use a lot of space between your paragraphs.

Don't place too much content on a single page. Don't expect any visitor to scroll all the way down to the bottom of a page with thousands of words. 

Navigation

Keep the use of hyperlinks inside your text paragraphs to a minimum.

If you must use hyperlinks, add them to the bottom of a paragraph or to the navigation menus of your site.

Download Speed

Most visitors will leave a Web page that takes more than 7 seconds to download.

Let Your Audience Speak!

Feedback from your users is a very good thing.

I would like to express my gratitude to the many people who helped me with my English, and others who gave me encouragement.
Special thanks goes to David Hucklesby who not only did a Technical Review and suggested many corrections, he also wrote the "printer-friendly" version CSS for me. David and I had some disagreements on a few issues, however I won disagreements because I am a higher specificity than he is (it’s CSS small talk).

External Links

Basic Web

CSS

javaScript

Free Templates

Others

 

hand-icon
X

New!
Step by step Float tutorial added in page-20