Lessons from a Coding Challenge

Since completing the Full Stack Web Development Immersive at General Assembly, I've thrown myself into the job search and have had the opportunity to complete some pretty interesting coding challenges - a key part of the interviewing process. One of these challenges resonated with me as it was with a company I admire in a city that I love - New York City - and showcases a trailblazing brand born in Detroit - a city I lived in for two years while pursuing an economic development fellowship.

One of the questions most often asked by employers is whether I prefer the front-end or back-end. At first, I was hesitant to commit to a response for fear of turning down a potential opportunity. Whatever you'll hire me as, immediately rushed to my mind. But as someone with a background in architecture, a profession where you are taught early on that "to design is to solve a problem", it only made sense to pick a path I already held great passion for and build my tech career on it's shoulders.

The challenge was to replicate an existing page making the front-end responsive (three column web, two column tablet and one column mobile) and using the back-end to grab contact form data and send a confirmation email. Today, I'm going to focus on the client-side of things - HTML5, CSS3, responsive design - but will write a future post all about forms and my journey towards a successful contact form submission using Swift Mailer, a library that allows you to send email from within your PHP scripts.

To create the responsive layout, I used Twitter Bootstrap, a mobile first front-end framework that lets you easily layout your page against a 16-column grid. Grids are important! Then added media queries to give each platform (web, tablet, mobile) it's own unique look (see the mobile screenshots below). For the contact form, I used HTML5 forms because it allows you to do front-end validation - like, required and pattern - and has several useful attributes and tags that enhance the user experience. For example, the "for" attribute in the <label> tag matches the input tag's "id" attribute and  allowing the text in the label to be read out to screen reader users. 

Mobile Responsive Navigation Menu

Mobile Responsive Navigation Menu

Mobile Responsive Site

Mobile Responsive Site

So, what did I learn from this project? The biggest challenge for me was the back-end. My lack of familiarity with PHP, the intricacies of it's server, the mailer and GMail's security all created mini-roadbumps in the development process. But, that is all behind me. What did I wish I had done differently? Gone with my gut! I initially started building the project in ExpressJS because I thought it was the only way I could incorporate Sass - a CSS language that allows you to write DRY code - into the project. My only prior exposure to PHP had been via Wordpress and I was certain that npm install --save was not needed for this exercise, and it wasn't. So after a few days, I started over.

What is still left to do? I'd love to incorporate php-sass into the project, polish up the user experience, and experiment with back-end validations.

Web Layout | Responsive (click through for live site)

Web Layout | Responsive (click through for live site)