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.
- Webpage DEconstruction: A very basic lesson that discusses the essential elements of a webpage.
- Common HTML Tags: Tags that most people use in their webpages along with examples.
- Uncommon HTML Tags: Tags that are less used but still useful
- 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.
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.
- All Boxed In: The CSS box model, the root of everything. Also discussed is the inline model.
- Rules and Regulations: Learn how to correctly format CSS and other useful tidbits.
- Common CSS Properties: These are essential properties which means you should probably use them.
- Visual Layout Options: To float, or not to float: that is the question.
- Tackling Tableless Design: Free yourself from boring, boxy designs.
- IE Pest Control: Internet Explorer getting you down?
- CSS Information page #1
- CSS Information page #2
- CSS Information page #3
- CSS Information page #4
- CSS Information page #5
- CSS Information page #6
- Cascading StyleSheets 2.0: Programmer's Reference: A very good reference book written by a CSS expert.
- Colour Lovers: A site targeted to anyone who loves color and design. You can search for palettes (by hue) which really help when developing a color scheme.
- 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.
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.
Dynamic HTML Tutorials
Assorted webdesign tutorials.
- Webdesign Aesthetics: How you use color on the Internet is more important than many people think.
- Tips and Tricks: Things I've made use of to enhance my designs.
- Common Web File Formats: Images and scripts and archives... Oh my!
- Moving On Up to XHTML 1.0: The deal behind XHTML and why people think you should abandon HTML once and for all.
- 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.