The Fire In The Clouds HTML site is my longest running project, I have been updating and maintaining this portion of the site for over a year. Despite the time spent on it's upkeep, it can be fairly predictable and the underlying code is, quite simply, astonishingly awful. This is because I initially used Trellian WebPage, a WYSIWYG web page editor, to create a table based layout sytem. After it's original creation, I have updated it purely by hand. Unfortunately, damage done can not truly be healed. Sections of the site will move around when content is added, removed, or modified, alignments will change, and, most frustratingly, the sidebar on the left is never in it's proper place, save for on the home page. I write all of this to emphasize the most valuable lesson to be learned in web design; never ignore the code. Always look at the code of the site you are creating. It's okay to use a WYSIWYG editor, as long as you frequently inspect the code, and clean it up as best you can. But I digress.
This site is split into five pages, with several notable features. The notable features are the popout player and the sidebar. The pages are a homepage, a page with information about Fire In The Clouds, a page with an embedded store, and page with pictures of Fire In The Clouds and a page with information about the site itself.
The sidebar was also relatively simple to code. I merely created a table cell of the [fixed] width I wanted, and added the images and text, then linked them properly. The only issue I encountered was the inability to center the embedded Facebook like button; however, when I finally had it aligned as I wanted it, I realized it looked better aligned slightly left, and returned it to that form.
The first page, the homepage, is meant to be very basic, and to act as a portal to the other pages on the site. It includes a small paragraph of text, to tell of news or new releases by Fire In The Clouds, and underneath, an embedded flash player, curteosy of ReverbNation, along with a link to launch the same player in a popup window, in order to listen uninterrupted while browsing the other pages of this site or while browsing another site entirely.
The About page consists of information about Fire In The Clouds. The information covered is relatively basic, the hardware and software used in the creation of the music, the location and aspirations, and a bit of general background information. Other than this text, there are no distinguishable features of this page.
The store page proved a bit difficult to code. This page was added after the initial creation of the site, so I hard coded in the iframe. ReverbNation provided the code; however, it did not work. Not to say that the code itself was faulty, for it worked in a seperate blank HTML document, there seemed to be some unique issue with the existing code for Fire In The Clouds' site. I made a few modifications to the iframe embed codes supplied by ReverbNation and was able to get the store, fully functional, embedded in the page. Underneath this store, there are two images, each linked to an mp3 format song hosted on that server, as free downloads offered by Fire In The Clouds.
The Pictures page contains small thumbnail images that link to full size counterpart images. The thumbnails were added to the page, organized and formatted through the use of a table within the existing table, with each cell being hard coded with a concrete size, and each image centered vertically and horizontally within those cells.
The About This Site page provides information about the site itself. It provides a list of methods and programs used, copyright information for trademark and image use, contact information for the webmaster [myself] and Fire In The Clouds himself, and a link to the changelog.
Despite the messy and generally awful underlying code of this site, I feel it shows my ability to hard code in existing sites, and to adapt to situational differences. Despite all of this, the site, when viewed in a browser, is relatively aesthetically appealing, and certainly meets the level of functionality it was meant to meet.
Visit the site here.