Main Page Updated

It has been a few months since I updated the index page of www.katco.betterperson.net.  The last index page was a template that I found on Open Source Web Design.  It was a very interesting template but it wasn’t really my style.  When I checked a link to the index page a few months ago I knew that Iwould have to change it soon.

I chose a template last time because I wasn’t feeling very confident about my web designing chops.  It had been a while since I designed anything.  Even the last page I wrote for myself was very simple.  I was also going through a yellow phase.  ^_^;;  This time I had a vision of what I wanted even before I started writing code.  I wanted something that was similar to a lifestream but I don’t actually generate a lot of content since I don’t have a YouTube account and everything I do on Facebook is personal.  I ended up with just my blog feed, my Flickr photos, and my Twitter feed.  Add a section for describing who I am and I had the four boxes that I used in the layout.  In a way I think it’s good, the four boxes fit nicely on the page and it’s easy to tell what is what.

Getting RSS feed information into an HTML page was harder than I thought.  I’ve never tried it before so I didn’t know what was required.  I ended up using Rssinclude to create RSSboxes for my blog feed and my Twitter feed.  It was a very easy to use and good looking solution.  Because I like knowing how things work I eventually want to learn how to handle the embedding of RSS information into HTML on my own.  There are a lot of good options for that, I just didn’t take the time to go over them yet.

Getting my Flickr photos on the page wasn’t hard.  Getting them on the page in a format that would work with the layout of the page was hard.  It involved starting with a Flickr badge with no formatting so that I could assign the layout myself.  But the badge comes with many unique CSS elements and three or four classes and I got a headache trying to figure out which ones to use when.  I think the way the badge code is written has changed over the years which makes it difficult to seek information about it because some information uses different class names, etc.  Thankfully I found this post on Pearsonified that helped a lot.

You can see the results up on the site now.  I’m really happy with the results.  This was the most CSS that I used in designing a layout from scratch.  CSS really took off while I wasn’t actively working on designing web pages.  I know it’s rough but it’s good work for my first new original page in years.

The only things I’m still working on is rounding the top corners of the boxes and trying to fix how the site looks in IE.


Leave a Comment

(required)

(required)

Formatting Your Comment

The following XHTML tags are available for use:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

URLs are automatically converted to hyperlinks.