Tutorials Index

Would you like to learn some of the basics (and perhaps some things not so basic) for yourself? Here are a few tutorials to help you along the way.

(For brief and pointed design aid, note our web design FAQ which we have begun.)

Basics

Basic design

Common web design blunders. Learn to avoid the mistakes that will make your site look amateurish and unpleasant to visit.

Basic HTML

Basic HTML tags . This is a very limited tutorial, aimed at providing our clients enough information that they can update page content. If you know nothing about HTML, you could start here, but you will find more comprehensive information elsewhere on the Internet.

Introducing the "box model." Be sure you understand how width and height is calculated in the world of web page building.

Introduction to Cascading Style Sheets

Add Cascading Style Sheets (CSS) to your page. You've probably heard about how much more you can do with CSS than with straight HTML. Here's how to set it up.

Creating and applying CSS rules . The basics of creating CSS rules. Includes an introduction to IDs and classes. (See also Links and the Cascade: Getting the Fundamentals Right.)

Controlling spacing with CSS. How to alter horizontal space between letters and words; how to get rid of (or control) the so-called "double-spacing" after paragraphs, and more.

Styling

Style your links. Alter your hyperlink styles, and even have a variety of styles on the same page.

Links and the Cascade: Getting the Fundamentals Right. Struggling to get your link styles to work? Make sure you understand the basic underlying concepts.

Styling a form button. Not really impressive, but it's better than plain jane.

Table Talk: collapsing cell borders and more with only CSS. Want your table HTML to be lean and clean? Here's how.

Positioning

CSS positioning. An at-a-glance introduction to static, relative, absolute, and fixed positioning.

Center a table on a web page. If you want to place all of your page content in a table in the center of your page, this is what you want.

Center a div on a web page. If you would rather use divs than tables, here's how to center one a web page, so that you can hold all your content inside of it.

Center an absolutely-positioned item. Absolute positioning is widely overused, but if you find it necessary to center an absolutely-positioned item on your page, here's how.

Vertical centering. How to get an item centered on your page vertically (using tables).

Vertical centering an absolutely-positioned div. Use at your own risk....

"Bottoming out" your footer, method 1 . A table-less method for getting your footer to stay at the bottom of the browser window when you don't have much content on your page.

"Bottoming out" your footer, method 2. This method uses a two-row table that spans the whole page to position a footer at the bottom. Unlike the Tutorial 7 method, your content can expand and push the footer down using this method.

Note: Cameron Adams now has a fully functioning all-CSS method for bottoming footers. See this page (off-site).

"Split Ends." Putting text at opposite ends of the same line - without table cells or separate divs.

Update your web browser: Internet Explorer|Firefox|Opera|Safari (Win & Mac)
Covenant Classical Christian School siteG. P. Concrete Specialist siteMetanarrative music project siteTrinity Presbyterian Church siteTruth and Beauty arts siteChrist Covenant church siteTrinity Reformation Church site

SELECT PORTFOLIO

Click on the monitor for more info about a site.

AFFILIATE

Customize your presentation with original music from MrGoJingles.