Front End Engineer

Job highlights

• In depth knowledge of HTML,CSS & JavaScript. Good experience in making Progressive Web Apps.
• Experience in CSS pre and post processors like SASS/ Stylus & PostCSS (we use SASS combined with PostCSS) & BEM style coding.
• Also make sure that proper aspect ratio is maintained,i.e.,images should not be stretched

Buyhatke | Front End Engineer As a Front- end developer, you will work with motivated individuals who are passionate- beyond- measure to offer the Ultimate Shopping experience to consumers. You will leverage the latest technologies (HTML5, Javascript, ajax) and application paradigms (web apps on the desktop) to create a beautiful client that runs seamlessly on windows, mac, chrome, firefox, IE, safari.

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 & JavaScript

Good experience in making Progressive Web Apps

Knowledge of cross browsers & devices development issues and inconsistencies

Good knowledge and experience in ReactJS and Server Side Rendering

Experience in setting up & running task runners like Gulp & Webpack

Experience in CSS pre and post processors like SASS/ Stylus & PostCSS (we use SASS combined with PostCSS) & 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.

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.

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

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.