Post navigation

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.

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.