Scribd
Upload
56 views5 pages

Webflow Development Test Task Details

Uploaded by

rehanshaikh1059
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
56 views5 pages

Webflow Development Test Task Details

Uploaded by

rehanshaikh1059
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

DEVELOPMENT TEST TASK

We are looking for a developer that can complete this test task
100% perfectly.

The test task is not something we require done. It’s already been
implemented on our website. It’s simply something we want to
check if you’re able to do before we proceed.

If you’re able to do this test task flawlessly, then we can probably


continue to work together for many years. Our last developer was
with us for 4-years. However, she has had a baby now and will be
unavailable going forward, so we need a new developer.

Test task:

We require you to recreate just one section from this webflow


design:

[Link]
=preview_link&utm_source=dashboard&utm_content=obmodtes
t&preview=332a7a19bb8a0babf269a327f976453e&workflow=pre
view

Page 1 of 5
DEVELOPMENT TEST TASK

Page 2 of 5
DEVELOPMENT TEST TASK

Above is a screenshot of the section we would like you to


recreate. Only the section “How it works” and up until and
including the “If you don’t love it, you can swap for the other
option during trial.”

You can find the high-resolution video file here:

[Link]
ng

Part of the difficulty we have had in finding a developer is getting


the animation timings correct.

The fade-in of the texts, and images etc needs to be IDENTICAL


to webflow.

The spacing, and everything else also needs to be identical.

If you are new to Webflow, you can click this button on the
preview:

It will then allow you to select elements, and view the attributes.
All the animation styles, timings, padding etc.

Page 3 of 5
DEVELOPMENT TEST TASK

You can see in the above screenshot, when I select an element, it


will give all the attributes on the right side bar.

If you are able to recreate this section IN WOOCOMMERCE


perfectly, with all the correct spacings, timings, fonts, animation
styles etc. Then we can work together for a long time.

We prefer a solo freelancer, rather than a team, so we can work


together on Skype.

The hours are flexible. If you work other jobs, that is fine, as long
as we can pay you for full-time, and you can always put our work
as priority.

This is an unpaid test task. This section of the website is already


live, and working perfectly. We are only asking you to re-create an

Page 4 of 5
DEVELOPMENT TEST TASK

existing page, to see whether you are able to take a design from
Webflow, and implement it identically to Webflow.

Part of your other tasks will be making sure our website is up to


date, secure, and general back end tasks, like report
management. We would require you to make sure all our tracking
(pixels, GA, etc) is all working, and stay up to date with best
practices.

This is a full-time role, and we are looking for someone to join our
team longterm.

In order to submit your application, please provide a link on a


staging server, showing this section complete. Please only
submit once you are sure it is an exact 1:1 copy.

Making it perfect for mobile, tablet, desktop, and speed


optimisation is a big bonus.

Page 5 of 5

Common questions

Powered by AI

The developer must recreate the "How it works" section from a Webflow design in WooCommerce, ensuring that animation timings, spacings, fonts, and styles are identical to Webflow. The test task requires that the implementation be flawless across mobile, tablet, and desktop platforms and optimized for speed .

Proficiency in both Webflow and WooCommerce is crucial as the role involves replicating Webflow designs in WooCommerce with high fidelity. The developer must understand the nuances of both platforms to achieve precise implementation, manage animations, and ensure functionality and compatibility across different devices .

By successfully completing the test task, the developer can secure a full-time position with flexible hours and long-term employment potential. This opportunity offers stability and possibly a collaborative working environment with the client .

Advantages of working as a solo freelancer include greater flexibility in working hours and more direct communication with the client, fostering a closer working relationship. However, disadvantages might include increased responsibility for all aspects of the project and potentially less peer support and shared resources compared to a team environment .

Challenges include accurately replicating animation timings and styles, matching spacing and layout precisely, and ensuring cross-platform compatibility. Moreover, WooCommerce may have different limitations or functionalities compared to Webflow, requiring the developer to creatively solve compatibility issues while maintaining the design's integrity .

The document suggests evaluating potential long-term collaboration by assessing the developer's ability to meet the test task's high standards, adaptability to flexible working conditions, responsiveness to client needs, and prioritization of the client's projects above other commitments .

Identical animation timings and spacings are emphasized to ensure the developer can precisely replicate design elements. This precision indicates strong attention to detail and the ability to reproduce complex interactions, which are crucial for maintaining visual consistency and user experience across platforms .

The unpaid nature of the test task serves as a rigorous filtering mechanism to assess the applicant's skills and commitment before offering a paid position. It implies that the developer must independently value the potential long-term opportunity and possess confidence in their ability to meet the task's precise standards .

The document describes the ideal working relationship as long-term, preferring a solo freelancer who can prioritize the client's work. Communication is facilitated over Skype, and flexibility in hours is mentioned, provided the developer is committed and prioritizes this position despite any other engagements .

Mobile and desktop optimization ensures that the recreated section performs flawlessly across all devices, enhancing user experience. It's considered a bonus as it demonstrates advanced technical skills and attention to detail, indicating the developer's capability to handle more complex general optimization tasks .

You might also like