Webdesign Tutorials

This page was last updated on:

This is my page for all the website design tutorials I've decide to write. I'm not an expert in the subject but it is one that I'm very interested in. I started creating webpages when I was twelve and haven't stopped since. I learned mainly by trial and error and by viewing the HTML and CSS source code of webpages to see how it worked.

To create my pages I handcode in Windows Notepad and use a tableless design approach that utilizes a lot of Cascading Style Sheet properties. CSS design is an advanced technique that's a little difficult and confusing to understand at first, but is well worth the time and effort. The primary problem with tableless designing is that Internet Explorer doesn't display CSS like it's supposed to but that's a story for another time.

Originally I never intended to make printer-friendly versions of my tutorials, but then I was asked to teach someone basic website design so I created them for reference purposes.

Instructions for the print versions: I recommend you view them/print them with Firefox. Seriously. When I viewed them in both IE 6 & 7, unnecessary spacing was added that completely screwed up the layout and each page is supposed to actually be a single page. Netscape or Opera may possibly work. Before printing, remove the margins by going to File -> Page Setup -> Margins & Header/Footer (if you forget, the default is 0.5 for all sides). You can also access Page Setup by going to File -> Print Preview.

HTML Tutorials:

Hyper-Text Mark-Up Language is what most webpages are made out of. It's very simple to learn.

  1. Webpage DEconstruction: A very basic lesson that discusses the essential elements of a webpage.
  2. Common HTML Tags: Tags that most people use in their webpages along with examples.
  3. Uncommon HTML Tags: Tags that are less used but still useful

Print Versions:

  1. HTML Tags page #1
  2. HTML Tags page #2

External Links:

  • HTML for the World Wide Web: A good beginner's guide.
  • HTML Goodies: Has quite a few tutorials for HTML and more advanced techniques.
  • W3Schools: Go here for reference. It lists every single HTML tag and attribute in existence and some of them I was unfamilar with.

CSS Tutorials:

Cascading Style Sheets is a formatting language that brings out the best in your webpages. You must have a good grasp of HTML to use this.

  1. All Boxed In: The CSS box model, the root of everything. Also discussed is the inline model.
  2. Rules and Regulations: Learn how to correctly format CSS and other useful tidbits.
  3. Common CSS Properties: These are essential properties which means you should probably use them.
  4. Visual Layout Options: To float, or not to float: that is the question.
  5. Tackling Tableless Design: Free yourself from boring, boxy designs.
  6. IE Pest Control: Internet Explorer getting you down?

Print Versions:

  1. CSS Information page #1
  2. CSS Information page #2
  3. CSS Information page #3
  4. CSS Information page #4
  5. CSS Information page #5
  6. CSS Information page #6

External Links:

  • Cascading StyleSheets 2.0: Programmer's Reference: A very good reference book written by a CSS expert.
  • Position Is Everything: This is the absolute best site for Internet Explorer bug fixes.
  • StrangeBanana Color Scheme and Layout Randomizer: This site uses CSS to randomize color, layout, and font-face. You can sometimes get really nice color combinations and even if you don't this site is still interesting.
  • W3C CSS Validator: The World Wide Web Consortium's free CSS validator.
  • W3schools.com: A very good online site for reference.
  • The Zen of CSS Design: This book is all about tableless design and filled with tips and tricks on the subject. If that's not enough, there are full color photos of good designs and info on how they were made :). You can see the designs from the book (and many other official and non-official designs) online.
  • Zvon.org: Another good online site for reference. They also have CSS1 and CSS2 tutorials.

Miscellaneous Tutorials:

Assorted webdesign tutorials.

  1. Webdesign Aesthetics: How you use color on the Internet is more important than many people think.
  2. Tips and Tricks: Things I've made use of to enhance my designs.
  3. Common Web File Formats: Images and scripts and archives... Oh my!
  4. Moving On Up to XHTML 1.0: The deal behind XHTML and why people think you should abandon HTML once and for all.
  5. Slicing and Dicing GUIs: A graphical user interface is just a way for visitors to interact with a website. GUIs can range from simple to highly complex. Learn how to turn them into website designs.

External Links:

  • Absolute Cross: A good resource for webmasters and those who want to learn how to do great things with Photoshop.
  • GUI Stuff: You can download great graphical user interfaces here. They have a lot of graphic design tutorials (Fireworks, Illustrator, Paintshop, Photoshop) as well.