Magic Design Webflow Assessment Test

Thanks for taking the time to complete this assessment test. This test will help us evaluate if you are a good fit for Magic Design. Below you should find everything you need to know, to get you started.

Please read the entire briefing before diving heads over into the task. Speed is important, but quality is more important.

The task completion should take around about 2 hours. With Fin Sweet Attributes solutions, you should be able to complete 90% of the tasks. Only one small task involves some custom CSS. For the Slider, you can also use Swiper.js if you want.

Set up the CMS.

In the project, you can find already existing wireframes for the “Blog Overview” page and the actual “Blog Post” page. Please connect the CMS for all pages, and make the necessary connections within the CMS structure like Authors & Categories. For the content, you can just randomly add items.

Functionalities

Blog Overview Page

  1. Automatic estimated read time.
  2. CMS Filter by Category. Also give it the option to have no filter (Show All)
  3. Build a search bar which, is searching through category content, headline content and short description content.
  4. Make all headlines automatically to be truncated with “…” when they are longer than 2 lines
  5. Make all short descriptions to be truncated with “…” when they are longer than 3 lines

Blog Post Page

  1. Automatic estimated read time.
  2. Dynamic Table of content.
  3. Display only blog posts with the relevant category. Make this category be displayed in the headline of the section "section_blog-post1-related" as well.
  4. The related blog posts component needs to become a CMS Slider.

General things and Expectations

  1. We usually don't design specific mobile views. Therefore, I expect you to have some eye for design, when making the designs responsive. Just make it work and look good.
  2. Best Practices, like active states, focused states, hover states, … are a must-have. Do what ever suits you. Here I don't want to check your design skills, it is only about best practice Webflow development and knowing what is important.
  3. If you first have to build UI components, go ahead and do so.

Last but not least

Make a quick loom video going through all things you would do before launching the project. For Example, cleaning unused classes. This does also include settings you would do in the page settings under SEO, Publishing, …

Acceptance Criteria

  1. Fully Responsive on ALL viewports.
  2. All functionalities are implemented.
  3. Email with preview link, published stage link and Loom is sent to willi.sommer@magicdesign.io

Quality is significant, but of course time does play a role in our business as well. The second your email arrives in my inbox, marks the completion time of your task.

If anything is unclear, don't hesitate to make a decision based on what you think suits the situation best.

I wish you all the best, and I'm thrilled to see your results.

Good Luck 🙌🏼

Willi