chad's web development examples

Using Tables

Demonstration of using tables and table markup properly. Then styling it with CSS.

Google Search Demonstration

Demonstration of integrating Google Ajax Search in your page.

JavaScript Date and Time functions

Demonstration of JavaScript Date and JavaScript Time functions and how to use them effectively.

JavaScript Windows functions

Demonstration of window functions in JavaScript.

This is also a demonstration of a JavaScript Library/Framework I had started creating a few years ago. Which has not seen development in quite some time now.

Google Maps Demonstration

Demonstration of integrating Google Maps in your page.

CSS Layouts

Demonstration of a growing collection of page templates using CSS Positioning and CSS Floating

CSS Tests and Quizzes

Some simple CSS tests and quizzes that I have used or seen in past interviews.

CSS Columns

Demonstration of how you can create columns using CSS.

Using CSS to represent buttons

Using CSS and XHTML to represent graphical buttons with rollover state.

This is clearly helpful when one is concerned about maintaining many button instances, button labels that are dynamic or buttons that need to be internationalized.

CSS Cascade Overrides

Demonstration of some basic CSS rules and overrides.

How to use specificity in your favour when developing CSS

XHTML and CSS Date Boxes

XHTML representation of date boxes, styled with CSS and Images.

Fauxcolumns in CSS using no background images

The column effect, not using any background images.

Fauxcolumns (bordered) in CSS using no background images

The column effect (bordered), not using any background images.

Using CSS to place borders or frames on images

Using CSS to place borders or frames on your images.

Similar benefits to the CSS buttons

CSS Inline Floats

Using floats to drop block elements into content.

Link Icons with hover

Icons for link types, with a hover effect.

CSS Specificity and Overrides

Demonstration of CSS Specificity

CSS Thumnails with Hover

Demonstration of Thumnails and Hovers with CSS Backgrounds

DHTML Date Picker

DHTML Date Picker with Validation

DHTML Scroller

DHTML Scroller that recreates a styled IFRAME with scrollbar effect

DHTML Shifter / Circular Carousel

DHTML Shifter that creates a shifting/carousel effect.

An even better one can be found here

JavaScript Back-to-top Effect

Using JavaScript to enhance the Back-to-top function.

Scroll effect for back-to-top.

Calendar Picker generated with JavaScript

Using JavaScript and XHTML Snippits to generate a calendar.

Dynamic Calendar with pickable date-time regions.

Using JavaScript to round corners on the fly

Using JavaScript to target specifiv blocks that need rounded corners.

Using JavaScript to create the rounded corners effect by dynamically writing XHTML elements.

Menu with an enhanced slide-over effect

A semantic menu with an enhanced 'slide over' effect created with JavaScript.

Ease scroll into bookmark

using JavaScript to enhance the scroll to bookmark effect.

JavaScript Ticker

A ticker that types in and scrolls individual headlines/messages.

A re-usable ticker built with OO JavaScript.

Characters-left Text Area

Character counter-feedback for how many characters remain in a textarea field.

Using JavaScript to enhance the usability of a limited length textarea field.

JavaScript Hex Colour Table

Using JavaScript to generate web safe hex colour table. Amazon asked me how to do this in an interview, so I figured I would share this with you all.

JavaScript Countdown Date

Using JavaScript to count down the number of days from one date to another.

Using JavaScript to provide Form Field-tips

Using JavaScript to provide a usabilty enhancement 'field-tip' on a form field.

Accordion Navigation/Component

Semantic DHTML Accordion effect for expanding and collapsing regions.

Demonstration of Buggy behaviour in Firebug

Demonstration of how the Edit CSS feature in Firebug is ironically 'buggy'.

So don't count on Editing CSS in Firebug. Instead you should edit CSS in the Web Developer Extension.

Semantic XHTML Breadcrumbs

XHTML Breadcrumb component demonstrating Semantic markup that is styled with CSS.

Markup and Stlyes for Centering your page

Demonstrated solution for centering your page using Semantic and valid XHTML and CSS.

XHTML and CSS to create styled code blocks

XHTML and CSS for styling your code blocks.

XHTML and CSS to create Emphasized headings

Creating Emphasized headings effect using Semantic XHTML and CSS.

XHTML and CSS for Creating Valid and Semantic Forms

Using Valid and Semantic, flexible and reusable forms markup.

Highlighted Elements

Simple XHTML and CSS to give the highlighted effect.

XHTML Lists

Markup and Styles for all HTML list types.

Header Components - courtesy of Mozilla

Markup and Styles representing headers.

Heading Styles

Semantic Heading styles in XHTML and CSS.

Modular XHTML and CSS

Real-world Modular XHTML and CSS

Semantic Navigation Menus

Semantic markup implemenentation of flyout Navigation menus

IFRAME Resize

IFrame Resize Effect used to load in 3rd party pages and resize onload.

XHTML Tutorial and Demonstration

Demonstration of XHTML tags and Tutorial and Description behind the types and properties

XHTML Tags/Elements

Demonstration of XHTML tags and how they can be used and styled.

XHTML JavaScript Comboboxes with Parent-Child Items

Demonstration of parent-child items in comboboxes.

Slideshow implemented in XHTML, JavaScript and CSS

Slideshow implemented in Semantic XHTML, CSS and JavaScript.

XHTML Div Pop-in effect

Pop-in Effect using DHTML