Return to Works

Return Back

Return Up

Return Up

A quick preview of CAA's Mobile Redesign on iPhone 7 with slides.

Arora Jewellers

Web Development | Zeplin Conversion

An accessible and responsive one-page conversion with a challenge of using only floats/ .clearfix for layouts.


the story

This was the first project assigned to us during the first week of the HackerYou/ Juno's Bootcamp. The project was meant to emulate a common task that we would perform as a front-end developer. A design was provided to us, where we were to execute the designer's vision on the web, and to build a good experience for the users, regardless of the device on which they are viewing the site.


Before working on the conversion, there were couple of challenges. One of the main challenges, was to replicate the layouts by using only floats and .clearfix. This was a challenge because of transitioning from using flexbox/ grid, back to floats and .clearfix methods. Both methods served it's purpose, but the preference goes to flexbox because of it's advantages in saving time in workflows and responsive designing.

Analyzing Arora's design proposal on paper with sketches.


To begin with the conversion, I analyzed the designs and drew out a feq low-fidelity wire-frames to assist with the layout. With these layouts, I was able to create my pages efficiently, without having to think of how things would be layed out while coding. This saved me time and I used it to my advantage to polish up my code further for readability and worked on adding a few stretch goals.

final words

Looking back at my old projects from my part-time courses, I made some comparisons and identified improvements. I was able to see a difference in my workflow, get reintroduced to old topics, and learn/ explore new things along the way. It was a great introduction to get us familiar in presenting our code in a large group and this experience felt like we were collaborating with the client or digital agency. I had a fun time, I'm looking forward to the next project!