Project update: Creating the basic layout for my Louisville Triple Crown of Running site

This week, which is week 5 of the Code Louisville program if you’re counting, the assignments were the JavaScript and the DOM course, and the Responsive Layouts course.

But mainly I wanted to share what I’ve been working on project-wise. In a previous post, I talked about making the Louisville Triple Crown of Running website more user-friendly, so I’ve come up with a basic layout that solves the issues I was having.

One of the first bits of advice I got from mentors in the program was to put my ideas on paper before writing any code. My idea went through several iterations, but here’s the one I ended up with:

Since we’re using the mobile-first approach, here it is. 
And here’s what my site looks like in desktop mode.

One of my goals in the near future is to learn how to work with wireframe tools, but pen and paper was excellent for now. Last week, I spent several hours on the basic HTML structure, then learning CSS flexbox layout to make the site look like I wanted it to.

This early version of the site I’ve created is most definitely not pretty, but it accomplishes my objective of having the essential race information up front, on one page, and making it obvious where other important information can be found. Here’s a screenshot of the mobile version:

Mobile screenshot
Putting the emphasis on function here…

And a screenshot of the desktop layout:

desktop screenshot
Putting the emphasis on function here too. 

All those different colored lines are for my reference, and not part of the design. Just in case you’re wondering. I would love to have colors, photos, and nice fonts, and I’ll get there in the coming weeks. At this point, I just think it’s cool that I’ve created something that solves a problem. I’m pretty excited about doing more of that.

In other accomplishments this week, I was able to create a for loop in JavaScript that displays some member information from my Party Parrot Fan Club site. (This is the one I’m using to apply and test new concepts I’m learning.) Again, it doesn’t look terribly elegant, but it runs. Here’s a screenshot of what that looks like:

Screen Shot 2018-06-10 at 12.02.07 PM

And here’s the code:

Screen Shot 2018-06-10 at 12.03.22 PM

As always, if you want to see the code from either of these projects in its full glory, you’re welcome to look at my GitHub profile:

One thought on “Project update: Creating the basic layout for my Louisville Triple Crown of Running site

Leave a Reply

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

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

Google photo

You are commenting using your Google 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 )

Connecting to %s