AquaBunker Website

I started building the AquaBunker website in order to learn new CSS methods for web design. In the past, I had done all of my website layouts using Photoshop and HTML tables. This worked well, but was tricky and not very flexible. Newer standards all use CSS for this. CSS is very flexible. You can see an example of CSS's flexibility in action at css Zen Garden.

Cascading Style Sheets

The most attractive aspect of CSS for me was simply the way it worked. You had your regular HTML document with normal tags, and CSS simply let you customize each of those. This allows the same HTML to be used for an infinite number of layouts.

Requirements

  • Utilize CSS for layout
  • Utilize PHP for fetching pages
  • Pass XHTML 1.0 Transitional validation
  • Mouse-over navigation buttons

Designing

AquaBunker was designed in Adobe Photoshop. I stuck with a color scheme of greys, blue, and orange. You can see the color scheme in the footer.

Coding

After drawing the website out, I exported all the images I needed and began researching and learning CSS. I coded the website using NoteTab, a text-editor with some extra features. After this coding, the website was 'functional'. It merely worked, but had many errors and would never pass XHTML validation. I used PHP to fetch my pages based on an argument passed in the url.

Hosting

I settled with hosting from my domain provider namecheap and have been happy so far. In the past I had all my domains with 1and1, but they screwed up and wouldn't reimbursed me so I've transfered all my domains to namecheap. I installed phpBB 3.0 for the forums and used a small script to display news from the forums on my website's main page.

Tweaking

After hosting, I began fixing up my code and getting it validated. I switched to Notepad++ as my text-editor. I highly recommend it. Supports syntax checking for programming and lots of features even power users would appreciate. After fixing up my CSS and HTML, the site finally passed validation. In the footer of each page is a link to the validation for XHTML and CSS. Hopefully they still work...