This is to showcase my approach of how I tackle problem and plan in advance in real life, such as been asked to build a web page in 4 hours.
A simple wireframe is attached for you to implement in the stack of your choosing.
- Maximum of 4 hours to complete
- Site should be responsive for mobile with a minimum size of 320px, the designer has forgotten the mobile designs so please use your best judgement on how you would adapt the design to mobile
- Site should contain a carousel that works on all devices
- Please use the modal pop out where you think it may be applicable
- Feel free to code in your framework of choice (React, Angular etc.)
-
After I saw the wireframe and the 4 hours time limit, I realised I must choose appropriate tools/JS libraries to help me efficiently build this web page, rather than reinventing the wheel. As it doesn't involve data binding, state management nor life cycles, using ReactJS/AnguarJS seemed over-engineering, therefore I decided to use jQuery library. Additionally I used SASS, Gulp, and Browser-sync to make my development more efficient.
-
I used FlexSlider JS library for displaying the hero slider, and FancyBox for image enlarging and modal popup. Both library work across all devices.
-
Layout and theme in general was not hard to pick up, so I initialised SASS files with standard layout and theme, and collected theme colours via colour picker tool.
-
Heading & body fonts are all sans-serif, however body font seemed like a custom font so I used a similar Google font 'Montserrat' instead of Ariel.
-
Design was straightforward so I just followed along. As no tablet/mobile design provided I decided to simply stack up each small blocks or reduce the total amount of columns in a row when viewport width reached tablet/mobile size.
-
Modal will be displayed when you click on "VISIT SITE" button.