The items in the title of this post are in reverse order, but it’s my blog and I can do what I want, so let’s get to the big stuff first, shall we?
Last Friday was my last day as associate editor at TechRepublic, which was bittersweet. I’d been there for almost three years, I had a great group of coworkers, and I learned so much and gained a lot of professional self-confidence during that time. But moving on so I could focus more on learning and getting experience in web development and UX was what I felt like I needed to do.
At the beginning of this year, I was in a mediation class (I’m going to get all new age-y on you for a second.) and two words came to me: listen and honor. I decided to adopt those as sort of a mantra for this year, as much as I can. So a few weeks ago, when I thought about leaving my job, something just felt right, and I decided to listen to and honor that inner voice.
So anyway, my plan is to spend the next few months working on my Code Louisville project, doing online classes, and looking for and learning from any other resources I can find. Then I’ll be looking for opportunities to get my new career off the ground.
In other news, I’ve had quite a bit of time to work on my Louisville Triple Crown of Running project version 2.0 over the past couple days, so I’ve gotten it to a pretty good place. Not perfect, by any means, but good. (It’s hosted here, if you want to check it out.)
This seems like a good time to go item-by-item through all the changes I’ve made. If you’re into that kind of thing, stick around.
Header and navbar
This section has evolved quite a bit over the last few weeks. An earlier version had gotten pretty clunky and I realized at some point that the items in the navbar weren’t the most important. So here’s the latest version:
I decided to just have three of the most important items and the logo at the top. After I took the Treehouse course on accessibility, I made sure to expand the clickable areas for the navbar items and add descriptive alternate text for the logo.
I’ve spent a significant amount of time on this one today. I started with a three-column container with some text and a white background. Here’s what I’m ending the day with:
My intent is to have some a race photo in the background instead of the generic cityscape, but I’m waiting to see if I can get permission to use an image from a local photographer first. I wanted to show off the overlays and lined up buttons though, because I’m particularly proud of those. It took a lot of trial and error to get everything to look decent there. (As always, if you want to see how I did it, you can check out the GitHub repository.)
After adding a more appropriate background photo, my last step will be to add a jQuery function to make change the background, text, and button for each column when it’s hovered over.
This one’s the section I’m still having trouble with, so I really didn’t want to draw attention to it, but that’s part of the process.
That button’s pretty ugly, right? I’m trying to figure out a more elegant solution that draws attention, but this is all I’ve got at the moment. I also want to do the overlay effect with the image in this section, but I haven’t been able to get it to work. I’m applying it to this entire section, but it only shows up on the left side and I’m not sure why.
Other race-related information
Finally, there’s the section with other information. Originally, I had this in a horizontal navbar in the footer, but I decided some of this information needed more attention drawn to it. Traffic information and road closures, for instance, is pretty important stuff to know about.
My goals with this one is the same as above: to get a more running-related background image, and make the columns change appearance as the user interacts with them.
With all the extra time I’m spending now, I feel like I’ve gotten a much better understanding of CSS and what it can do. Next up: a deeper dive into jQuery.