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.
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.