Week 7: Dear Bootstrap, you’re amazing…

This post is going to be a short one. I wanted to stick to my goal of posting at least once a week, though.

This week, I discovered Bootstrap. If you’re not familiar, it’s an HTML, CSS, and JavaScript library. Basically, instead of writing a bunch of code from scratch, you can say, “Okay, I want to make a navigation bar,” or “I want to make a button,” and there’s code that you can copy and paste that does those things.

It’s probably good that I learned how to do basic front end layout things the hard way first, but Bootstrap has made it a lot easier to accomplish the design I have in my head.

I’ll illustrate what I’m talking about with the header of my Louisville Triple Crown of Running site. Here’s the original header, created completely from scratch:

Here’s the desktop version of the original header.
And here’s the original mobile version.

Pretty clunky, eh? Technically, it met all my project requirements. It was responsive and the mobile version had a dropdown menu. But it was ugly and it took a lot of code to create that ugliness.

So here’s the Bootstrap version of both layouts:

Desktop version, created with Bootstrap
Mobile version, created with Bootstrap

If you’re looking closely, I’m sure you’ll notice that some of the content has changed. I’ll get to that in another post. My point for now is to show how I was able to create a better looking thing using a tool that’s now available to me. I’m looking forward to seeing what else I can do with this one.

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 )

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