How to Teach Yourself Web Page Design

Simple website design

Learning web page design is not out of reach for anyone with dedication and imagination. Hundreds of tutorial sites and pre-built programs are available on the Web, and you can download and customize free and low-cost templates.

Things You'll Need

• Web Hosting, with or without a page-building wizard
• HTML resources
• CSS resources
• Graphics program and resources

Instructions

1. Define the purpose of the web page. A site that gives personal or business information without customer interaction is the easiest kind to build. If you require features such as a mailing list, a shopping cart or an interactive calendar, it will be a bit more difficult, but it can be done.

2. Establish a look and feel. The best way to find a look you want is to surf around the Web and find websites you like. Make a list and be specific. Make note of what you like about the website, including ease of navigation; colors; curves or hard lines; simple, compact interface or wide interface with lots of design elements, including pictures and graphical elements. The interface is the website container -- sometimes it will be only at the top, sometimes at the top, sides and bottom.

3. Consider how deeply you want to get into programming. For an informational site, learning HTML or CSS is easy enough, and easier still is using a point-and-click website or a downloaded template. For a site with interactive features, the learning curve will be steeper. You'll have to teach yourself not only web page design, but also an action programming language such as PHP or Javascipt. Although there are resources and code libraries available for free on the Web, incorporating action scripts into your code is often more difficult than it seems.

4. Another option is to use a web site creation software such as Adobe Dreamweaver or MS Frontpage. These programs have rich features built in and offer template designs and some nifty special effects, like rollover buttons, as well. You can access and alter the HTML source directly or use the visual design option to edit the page as it will be seen, which is similar to the WYSIWYG editing function used in MS Word. These programs do have some limitations, but they are versatile enough to meet the needs of most website owners.

5. For comprehensive HTML and CSS tutorials, check W3schools.com: http://www.w3schools.com/, Davesite.com Interactive HTML for beginners: http://www.davesite.com/webstation/html/, CSSTutorial.net: http://www.csstutorial.net/, Sitepoint.com's 5 highest rated CSS Tutorials: http://www.sitepoint.com/subcat/css or search the web for other sources that make sense to you. Different people learn differently, but there are so many teaching sites online and books written that you should be able to find one that speaks to you.

6. Javascript and PHP are a bit more advanced, but the amount of education available online makes it possible for anyone to learn. To get started with Javascript, try Pageresource.com: http://www.pageresource.com/jscript/ , JavaScript for the Total Non-Programmer: http://www.webteacher.com/javascript/index.html or Tutorialized.com: http://www.tutorialized.com/tutorials/Javascript/1 .

   Great beginner PHP resources include Getting started with PHP: http://us3.php.net/tut.php and PHP 101: PHP For the Absolute Beginner: http://devzone.zend.com/article/627 .

7. There are also many graphic and layout tutorials online. For photoshop, try Photoshop Roadmap Interface tutorials: http://www.photoshoproadmap.com ,Photoshop-tutorials/Interface-design/Most-popular/1/ or Photoshop Web Design & User Interface Design: http://www.pslover.com/tutorials/Interface/1 .

   Another popular graphics program is PaintShop Pro It's a much cheaper option than Photoshop and offers compares well in functionality. Find tutorials here: Tutorialsphere Paint Shop Pro interface design: http://www.tutorialsphere.com/tutorials/paint-shop-pro/website-graphics .

   If you don't have a graphics program and are on a limited budget, you can download the Gimp for free http://www.gimp.org/ - check out the extensive tutorial section to learn to use the program.

8. Point and click websites are an easy option found just about anywhere on the web. They offer an absolute beginner an easy way to create a website in just a few steps, but are generally restricted in design. For super easy website creation, try JustHost.com: http://www.justhost.com/ , YikeSite.com: http://www.YikeSite.com/ , Webspawner.com: http://www.webspawner.com/ , or Web.com: http://www2.web.com/ .

Tips & Warnings

• For general web design advice, go to Websitetips.com http://websitetips.com/layout/ for sound layout and design theory and information. Regardless of which way you decide to go, if you want to teach yourself web page design, you will need to develop a good eye for color and learn graphics skills and layout design. The single-most important thing a website can offer is clear navigation. People who can't find what they are looking for will leave and not come back. So websites that employ clever hidden navigational tricks are bound to lose visitors.

References

• How To Build Websites
• A List Apart --web design articles
• Sourceforge.net Code Library