The Piano Education Page Looks Through Time


by John M. Zeigler, Ph.D.
Rio Rancho, NM USA


n  honor of the 20th anniversary of PEP, I thought it might be interesting to take a tour down memory lane and show the history of the appearance of the site. This exercise may not be for the faint of heart, but I hope it's fun! Get started just below.



Changes in technology

The Piano Education Page has gone through a number of major changes in look and functionality, particularly as better tools became available for writing HTML code. Some of these are discussed in the article, Piano Education Page 20th Anniversary. Anyone who has done it will tell you that you become very efficient and lean when you have to hand-code your site, as I did in PEP's first couple of versions!

HTML itself has been dramatically extended, along with the corresponding support in browser programs, so that many things are possible now that weren't possible 20 years ago. Probably the most far-reaching of these has been the implementation of Cascading Style Sheets (CSS). I was an early adopter of CSS on PEP, hand-coding it into the pages until tools became available that supported it, as its advantages in maintaining a consistent look and feel on a site were all too apparent. The 3-D graphics I created and used on PEP in its early incarnations were also unusual on the web when PEP was started. More recently, the growth in use of mobile devices spurred the addition to PEP of explicit mobile-friendly features.


The images below depict the site home page in various Opus numbers (rewrite versions). Each rewrite always included considerable new content and revisions of old content to keep it fresh. Each Opus also included completely new and different layouts for all the Kids pages. I haven't shown the new Kids layouts here. I am the culprit behind all these layouts, so any and all blame attaching to them is mine. Let's take a look at the evolution of the site now.

PEP Home Page Layouts During Its 20 Years Online

Opus 1, No. 1
Written entirely in HTML code

Opus 1, No. 2
Still hand-coded in HTML

Op. 1, No. 3
Tabular main menu, code generated

Op. 2, No. 1
First use of background graphics

Op. 3, No. 1
Background music added

Op. 4, No. 1
New logo, layout

Op. 5, No. 1
More densely packed

Op. 6, No. 1
Redesigned layout

Op. 7, No. 1
New layout, news front and center

Op. 8, No. 1
Simplified home, Presto menus added

Op. 9, No. 1
New logo, color scheme, navigation

Op. 10, No. 1
New logo, program, graphics
2015 - 20th anniversary


Page created: 1/8/15
Last updated: 01/30/15
Site Policies Credits About Feedback Reprinting

Reprinting from the Piano Education Page The Piano Education Page, Op. 10, No. 1,
Copyright 1995-2016 John M. Zeigler. All rights reserved.