Coding from scratch

It ain’t the prettiest site, but for my first effort, I’m proud of how well it works.

I’m proud to show off my full-fledged attempt at creating a website from scratch.

It’s my variation on my Multimedia Planning and Design assignment to create a “Welcome to the SEC” website based on some of the content from the Columbia Missourian’s terrific Road to the SEC special section, put together in advance of MU’s inaugural football season in the Southeastern Conference.

Check it out, the site is live.

It’s my first foray into building from a blank slate to a fully-functional website with inside pages, media and CSS styling. We were given content for two schools, LSU and Florida, and an introduction story, then told to create something that follows HTML/CSS and journalistic design rules.

The whole thing was a real challenge, from storyboarding to execution, and it was crucial that I pace myself and work within my own limits. This design was born of a compromise between my coding capabilities and my desire to do this great content justice.

My favorite part of the site is an old-school HTML technique, called an image map, that I used as navigation to the individual schools’ profiles from the splash page. Basically, the code identifies certain areas of an image file (this time a map of SEC schools I created) clickable. By identifying the X and Y coordinates of the LSU Tiger and UF Gator logos, I was able to create a circular area with a radius of 50 pixels that essentially makes each logo a button to link you to each profile.

A look at the code associated with my image map with the “Inspect Element” feature on Google Chrome.

It’s pretty simple, but it was a cool effect for a rookie like me.

On the inside pages I made sure to play up a large lead photo and let the story flow underneath the important fast facts info. Plus, the school’s logos appear again as navigation from profile page to profile page.

The project was a good start and I had fun working through the kinks and bouncing ideas off my classmates and friends. Despite the headaches, I’m starting to feel comfortable with HTML, stylesheets and thoughtful web design.

Who knows, maybe someday I’ll ditch this WordPress CMS for my own from-scratch site.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s