Saturday 6 May 2017

How I Learned Bootstrap (Part 1/2)

In recent years, I've been busy stepping up to the demands of front-end web development. With the explosion of mobile technology and all the other nifty portable tech devices, front-end has never been so hot.

But I certainly didn't just wake up one morning and decide, I am going to pick up my front-end game. No, it sparked from a certain conversation I had a couple years back, augmented with tons of soul-searching.

Here's how it began

It was 2013. I was slaving away in a media house maintaining all their websites and microsites, for a CEO who obviously felt (and had expressed his disappointment) that my skill in coding did not translate to "beautiful" interfaces. At that time, even with a working knowledge of HTML, CSS and JavaScript, I was pretty much a server-side and database guy. Most people understood that web design and web development were two different disciplines. Not this fella. For his money, he expected someone who could make stuff work, maintain his servers and make stuff look pretty.

And then he hired this girl, who actually did make stuff look pretty. The animations, colors and responsive layouts she incorporated into her work made my spartan (white background, black text) style look positively horrendous. I viewed the source of her code, and the stuff I found in there bamboozled me.

I understood then, that no matter how many deadlines I met, no matter how hard I worked, no matter how many weekends I burned, my job was in jeopardy.

Then my Manager took me aside and confirmed my suspicions. Our CEO favored his new hire, not just because she was his new hire (though that didn't hurt, I'm sure) but because she made stuff look nice and shiny. This was the media and publications industry, my Manager explained. That was just the way it was. However brilliant I thought my code was on the server, it would go unappreciated. In this business, what mattered first and foremost was appearance. Also, to a lesser extent, this reflected the worldwide trend. Server-side and back-end stuff wasn't dying, but it was certainly not growing as fast as front-end, which was really taking off at that point.

In short, I ignored the front-end portion of my web dev game at my own peril. I had neglected it for years while learning new databases and scripting languages. And now my Manager's little nudge sent me in the right direction. The writing was clear on the wall.

Time to think...

Over the course of a five-minute smoke break, I made up my mind. I would pick up my front-end game. But my time in the company was over. The CEO was merely tolerating my presence because I got shit done. Once his new hire got into the swing of things (and stopped pissing our colleagues off, but that's another story for another day), my days in the company were numbered. I would be gone faster than you could say "Hypertext Transfer Protocol".

For all my faults, and believe me there are plenty, I've never been one to outstay my welcome.

Taking that first step

There were ex-colleagues on my network. I reached out and made a few calls, asking basically the same question.

How do I improve the front-end aspect of my skillset?

Lifelines
I'm glad I was nice to my ex-colleagues back then. Because, oh boy, they really came through for me now.

Some of them gave me advice. Better, some gave me links. The common thread was bootstrapping. Using a grid system to lock the front-end into a responsive layout. And finally, my search brought me to Twitter Bootstrap. One of my ex-colleagues swore by it.

Action 

Now that I had made up my mind to learn Bootstrap in order to beef up my front-end game, the rest was easy. Well, not easy, per se, but simple enough. The direction had been settled, the immediate steps defined. Now all that was required was action.

For a couple weeks, I dedicated myself to this task. Over weekends, I read the documentation. I perused the examples, explored the links, and marveled at the results as I tried out line after line of Bootstrapped HTML. Researching something as general as Responsive Design had been intimidating. Learning Twitter Bootstrap, which was merely a tool, was a lot more manageable. There were library books. Online tutorials. For a guy who had picked up VBScript and PHP from reading a book, this was familiar ground.

Next

Details about how I cut my teeth in Bootstrap.

No comments:

Post a Comment