Webflow code challenge: a prep guide

A look into what you should expect during a Webflow code challenge, and how to prepare for one.

Bethany Sarica
July 9, 2020
Resources

In this prep guide, we will brief you on exactly what to expect from the code challenge stage of our technical interview process. We will provide you with some tips and tools to assist you along the way.

For most of us, interviewing is an anxiety-inducing process. Just the thought of having to display our skills to a stranger whom we know is evaluating those very skills is enough to raise anyone’s heart rate. So take a deep breath and use the code challenge as an opportunity to expand and challenge your skills in a learning environment.

working environment

What to Expect 

Our code challenge is completed using a tool developed by Qualified.io. Qualified is a developer-friendly tool that helps our team assess technical skills. It uses a format that harnesses real-world tasks and integrated testing frameworks for a seamless coding experience. 

The assessment is broken down into three easy to digest sections:

  1. The first section focuses on your backend skills in Node, Express, and MongoDB. 
  2. The second section will evaluate your frontend skills using React. 
  3. Finally there is a short answer edge case questionnaire. This section gives you space to elaborate on decisions you made in the top two sections and explain how you could have expanded on your solutions. 

Within the assessment, there are detailed expectations of how to pass each solution. We designed these challenges to be simple, but when combined, to demonstrate a T-shaped set of skills.

How to Prepare 

Study up

Do your research! If you are unfamiliar or rusty with one of the languages or frameworks we use in our code challenge, take some time to brush up on those skills. Read technical writing, work through a tutorial, chat with another engineer or use one of the many practice code assessments you can find online. You can even let our team know you want a week to study before we send you the code challenge so we anticipate your timeline. 

Here are some resources we recommend you use to start your preparation:

1. freeCodeCamp

2. CoderByte free practice challenges 

3. HackerRank free practice challenges 

4. CodingTheSmartWay — learn the MERN stack

5. Learn the MERN stack video tutorial

Set the mood 

Pick the time of day that you feel most focused to start the assessment. Take a moment to relax before diving in, meditate, light a candle, maybe turn on some quiet tunes if that is your vibe. Remember that this is an untimed assessment, and you can take as many breaks as you need. 

Check out Leonard’s, Director of Engineering at Webflow, Spotify playlist.

Read the instructions and plan 

Make sure that you carefully read through all of the instructions provided. We include the task, acceptance criteria, and guidance during each stage. Think through the technical requirements for each solution. If you have any questions at all, always ask us. 

Once you feel confident, don’t dive directly into the code. Take some time to write down your thoughts and draw out some solutions. Draw diagrams, process flows, and other documentation to help. Without sufficient planning, you may find yourself missing edge cases or rewriting parts of the functionality. We encourage our engineering team to use a search engine to help them with their day-to-day work, and we see no reason to limit that during your assessment. 

Code, code, and code some more

Our goal is for these tasks to take you no longer than 90 minutes, but you will not be evaluated on the amount of time you spend on the challenge. Both challenges are all about satisfying the tests, so be sure to have a look at the test file to understand the expectation of the challenges. Writing more tests isn't required, but if you want to include more tests, add them in a new file. 

We look for passionate problem solvers, empathetic humans, and outstanding communicators that engineer solutions optimized for team productivity and cognitive ease. 

Pro tip: be sure your intent is clear via comments and code style. Remember to take breaks. Grab some water and get your eyes off the screen at least 5 minutes every hour. Stay calm and have fun with it, we are rooting for you! As always, if you have any questions or hit a roadblock message our team. 

Go time

You have completed all sections of the code challenge and are ready to submit. 

Before you do, take the time to check it over for errors and make sure you have fulfilled all of the technical requirements. If you have the time you could refactor your code, add additional tests, or explore more edge cases. Make sure that your solutions are easy to read and understand without your guidance. 

Once submitted, our engineering team will review your solutions. They will consider structure, grasp of language, readability, maintainability, standard coding conventions, elegant solution and edge cases. They will leave detailed feedback and decide whether they think you would be successful in the rest of the interview process and role. We will share that feedback with you either way. You can expect to hear back from your recruiter within a few days once the grader has submitted feedback. 

Keep calm, you got this

No matter the outcome of your code assessment our goal is for you to enjoy the experience. If you don’t make it to the next stage this time, don’t be too discouraged. We will always keep you in mind for future roles and our recruiters will keep in touch with you. 

If you have feedback about the assessment or your experience in the process please share that with our team. Our goal is to be constantly improving our technical interview experience and your feedback is invaluable. 

Do you have any remaining questions after reading this post? Please feel free to drop a comment below.

Bethany Sarica

Advocate for candidate experience and DEI. Bethany Sarica is a technical recruiter focused on hiring for engineering, product, and design at Webflow. When she isn’t chatting about hiring, you can find her rock climbing, cooking, or watching reality tv.

You might also like...

More

Join the conversation

What's Webflow?

Try it for free
Designer

Designer

The power of CSS, HTML, and JavaScript in a visual canvas.

Interactions

Interactions

Build website interactions and animations visually.

CMS

CMS

Define your own content structure, and design with real data.

Ecommerce

Ecommerce

Goodbye templates and code — design your store visually.

Editor

Editor

Edit and update site content right on the page.

Hosting

Hosting

Set up lightning-fast managed hosting in just a few clicks.