Things are winding down for my front end web development course in the Code Louisville program. I finished all the required classes on Treehouse, I attended my last class meetup, and earlier this week, I turned in my project. It has to go through final review before I officially pass the course, but I’m pretty optimistic.
At this point, I thought it would be cool to do a look back at the project and how far it’s come over the past few months. If you just want to see the final version, it’s here. But if you want to see the project’s evolution, including screenshots of its (very) humble beginning, keep reading.
The idea phase
I came up with the idea for the project a couple months before I actually started the program. I needed to quickly check the dates for a local race series called the Louisville Triple Crown of Running, so I went to the website and realized the dates weren’t on the front page. They were buried within some text on another page. Immediately I thought, “Somebody needs to fix this!” And I had my idea for my project.
For reference, here’s a snapshot of the actual site:
On a positive note, the photography on the website is beautiful, and the organization does an excellent job of creating enjoyable race experiences. Thousands of people wouldn’t continue to sign up each spring if they didn’t. But the website just isn’t very helpful.
Before I started designing, I wanted to define my goals for the site, and the problems I was hoping to solve. You can find a more detailed post about that here, but basically I looked at how I could streamline the process of finding important race information.
First, I made a list of what information needed to be front and center, and what information needed to be findable from the front page. This was based on my own experience as a user of the site, an interview with my husband, who’s been a runner and spectator at the races, and looking at other race sites for comparison.
- Race dates
- Race signup information, including pricing and a link to register
Information to link to from the front page:
- Race results
- Information about road closures, traffic, parking, etc.
- Information for spectators
- Race sponsor list
- About page
Learning prototyping tools like Sketch is on my to-do list, but at this point, pen and paper is the best tool I’ve got. So with that, I started drawing. Here’s what I came up with for a large-screen design:
And here’s my design for small screens:
Building: First attempt
Getting started with the HTML and CSS was the most difficult part of this project. At that point, in May, my skills were very basic. But I needed to get working, so here’s what came out:
This version, meant for smaller screens, was actually a later one. I hastily deleted screenshots of the really early versions, which I regret now.
Building: Making improvements
As the weeks went on and I learned more, I was able to improve the layout. Like a lot. As one of my fellow students told me, I took the design out of the 90s and made it look like something that might be used now. Here are some screenshots of that middle phase:
Putting on the finishing touches
Once I was satisfied with the structure of the site, it was time to add the final details. This included the header with a collapsible navigation bar, and substituting the stock background photos for actual race photos. Since the photos on the actual LTCOR site are the best part of it, I wanted to keep them in my design, and I got the photographer’s permission to do so. Here are some screenshots of the final product:
I’m really happy with the progress I’ve made in my knowledge and abilities. I’ve taken the design from something I was embarrassed to show in class to something I’m proud to put in my portfolio. I think the most important thing I’ve done here though, is build a solution to a problem that I saw. I’m definitely going to be looking for more opportunities to do that.