Website Development Tutorials

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 hand code in Notepad++ (Windows Notepad works as well but it has far fewer features and annoying bugs) 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 creating tableless designs 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 by someone to teach them basic website design so I created them for reference purposes.

Instructions for the print versions: I recommend you view them/print them with Firefox or Opera. Safari might work as well. Seriously. When I viewed them in both IE 6 & 7, unnecessary spacing was added that completely ruined the layout. Each web page is supposed to fit on a single sheet of paper.

Firefox

Before printing, remove the margins by going to File -> Page Setup -> Margins & Header/Footer (the default margin size is 0.5 for all sides). You can also access Page Setup by going to File -> Print Preview. Change the header and footer to "blank" (the default settings (from left to right) is title, URL, page # of #, date/time).

Opera

Remove the margins by selecting File -> Print options. The default is also .5 (I think). Uncheck "Print headers and footers."

Hyper-Text Mark-Up Language/Extensible Hyper-Text Mark-Up Language Tutorials

HTML or XHTML are what most webpages are made out of.

  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:

Cascading Style Sheets Tutorials

CSS is a presentational scripting language brings out the best in your webpages. You must already have a good grasp of HTML/XHTML to learn 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:

JavaScript Tutorials

JavaScript is used to add interactivity to a website. You must already have a good grasp of HTML/XHTML to learn this.

Coming soon.

Document Object Model Tutorials

The DOM is the basic structure of a webpage. You must already have a good grasp of HTML/XHTML to learn this.

Coming soon.

Dynamic HTML Tutorials

DHTML is a term for dynamic webpage design. It's a combination of JavaScript, CSS, DOM, and HTML/XHTML. Obviously, you need to have a good grasp of all of these concepts before reading these tutorials.

Coming soon.

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: