Buyhatke | Front End Engineer

RESPONSIBILITIES: Implement Visual Designs in standards compliant, clean markup (HTML5/CSS3/JS) Develop responsive designs and thoroughly test cross browser compatibility of all product interfaces Identify and research new UI technologies Suggest and implement improvements to existing product interfaces Assist in building wireframes/prototypes Make data driven decisions based on analytics to improve user engage Advise, collaborate with, and synthesize feedback from designers and the backend team. Ready to explore and perform tasks that are out of your own pool of expertise Fulfil several project requests simultaneously while meeting tight deadlines. Make pages optimized for both performance as well as SEO Requirements: Expert in making scalable and modular Front End code In depth knowledge of HTML, CSS & Java Script Good experience in making Progressive Web Apps Knowledge of cross browsers & devices development issues and inconsistencies Good knowledge and experience in React JS and Server Side Rendering Experience in setting up & running task runners like Gulp & Webpack Experience in CSS pre and post processors like SASS/Stylus & Post CSS (we use SASS combined with Post CSS) & BEM style coding Experience in creating transitions/animations at 60fps especially on mobiles Note : PLEASE MAKE SURE NOT TO USE ANY HTML/CSS/JS FRAMEWORKS FOR THE ASSIGNMENTS. WE JUST WANT TO TEST OUT YOUR CORE CODING STRENGTH. Assignments : Align the above 4 images in the format below, but in such a way that the images are centered (both vertically and horizontally) in all the boxes irrespective of the height or width. Also make sure that proper aspect ratio is maintained, i.e., images should not be stretched. Required: Conditions: - We expect a simple solution i.e., a one code fits for all solution. So you bear in mind that the images and the corresponding containers would be dynamically generated and the sizes of the images would be unknown - From Rule above: No hard coding. - Submit all possible CSS only solutions Create a navigation bar that you think would give a good user experience both on mobile as well as on bigger screens such that the its performant on mobile as well. Create the following gifs in pure html ( make it in svg and additionally in canvas for bonus points ;) ) We at Buyhatke are committed to providing the users with web pages that display a number of hand picked promotions and exclusive offers that saves a lot of their money. These pages would be static or dynamic depending on the promotion and would be required to make it as fast and efficiently as possible which is also SEO optimized. This mega assignment evaluates you more on the lines of your coding capacity. Its a mixture of HTML, CSS, JS and PHP. Here it goes: The page that needs to be created is a coupons page that displays the coupons of certain websites and upon clicking it copies the code and then goes to corresponding offer page. It takes in values from a JSON file with a certain format. Have a look at the layout of the web page here . So basically, you ll need to create a replica of the image, i.e., the web page would display a set of boxes that shows the coupon title, coupon's store, and a get coupon button. Each box would have a layout template sample as shown below <ul> <li data-coupon="coupon1"> <div>{store image} {store name}</div> <img src="{category img}"> <h3>{name}</h3> <button class="get-button" data-code="COUPONCODE1">GET COUPON</button> </li> .. .. .. </ul> The li elements have to be created dynamically based on the number of coupons within the json file. The file has to be read and should dynamically populated within the HTML using PHP. Upon clicking the get coupon button of each box, the window should scroll down to the div below with class .coupon-details and should show the corresponding coupon and provide a link to go to the store. <div class="coupon-details"> Coupon code copied was : {coupon code of the corresponding "coup#"} <a href="{coupon store url}">click here</a> to go to store </div> The JSON file can be downloaded here: DOWNLOAD NOW * Above codes can be modified to your convenience and creativity Note : Please create the single zip file for all asignments & share the link using google drive in below form --> Loading... Site Map --> About Us Blog --> Press Release --> Contact Us Careers Media Privacy Refund Policy Terms & Conditions Merchant Center --> Price Comparison Mobile Apps Buyhatke Shopping Assistant Price Comparison Android App Books Home Compare Mobiles URL Shortener Price Comparison Browser Add-On Mobile Recharge Myntra On The Web Innovative Community Hacks: One Plus One Redmi 5a Flash Sale Offers and Deals: Offers & Deals Home Camera Offers & Deals Mobile Offers & Deals Clothing Offers & Deals Watches Offers & Deals TV Offers & Deals Home Appliances Offers & Deals Footwear Offers & Deals Jewellery Offers & Deals Coupons & Offers: Coupons & Offers Bank Coupons & Offers Flipkart Coupons & Offers Ebay Coupons & Offers Amazon Coupons & Offers Snapdeal Coupons & Offers Shopclues Coupons & Offers Myntra Coupons & Offers Jabong Coupons & Offers Infibeam Coupons & Offers Homeshop18 Coupons & Offers Paytm Coupons & Offers Freecharge Coupons & Offers --> Beautifully handcrafted by hatke people with &#9825; in &copy; Buyhatke Internet Private Limited. All rights reserved &uarr;