/FrontEnd-Assignment-Werlabs

Primary LanguageHTMLMIT LicenseMIT

Werlabs Frontend Developer assignment

What's in your assignment pack

index.html - the starting point with <head> assets and a "skeleton" markup.

css - the slick.css and slick-theme.css + of course your generated werlabs.css.

images - the images for the view, out of which most are already requested by the markup.

js - jquery + slick js for the carousel.

screens - the screens shots of the finalised view.

scss - your styling starting point with defined colours and the font to use for headings and copy.

Task

How would you reproduce the view in the screen shots in the screens dir?

Requirements

  • Style the view at mobile (375px screen width) and desktop (1200px screen width).

  • Add classes to the markup and style the view using werlabs.scss with the font and the colours defined within.

  • You are free to remove markup but we'd prefer if you don't add levels of html.

  • Use gulp to transpile werlabs.scss to /css/werlabs.css (Using npm install for dependencies and gulp default task, gulp)

Bonus Points

  • Use as many scss (sass) features as are reasonable for this assignment.

  • Add css minification to the gulp setup.

Important to note

The main objective of this assignment is not for you to prove that you can reproduce a design pixel-perfectly. Of course an understanding of design is required but your level of curiosity and ability to learn are more important. In the assignment task we are specifically looking for:

  • Ability to abstract when naming classes. Reusability is important. Imagine that you are making reusable sections that can be inserted on other views.

  • Ability to quickly prototype a view with a good enough representation of a design, for multiple screen sizes and with thought out transitions.

We'll be viewing the result on iphone 6/7/8 in Simulator on Mac and on latest Chrome on Mac. Cross-browser and browser backwards compatibility are important but not a primary in the scope for this assignment. If you use "edge" CSS then please have a fallback for IE10+.

FAQ

I have a question about the assignment

You are welcome to email peter@werlabs.com.

But that is/is kind of your homepage, can I copy the styles from there?

Well we'd know so please spare us that :). If not from the code you send, then from your explanation on how you tackled the assignment.

How do I share the result?

Please email/wetransfer a zip of the result to peter@werlabs.com. Please delete the node_modules dir before zipping.

Do I have a strict deadline?

No, but it’s nice if you can make it in a week.

Can I send a "partial" result?

Of course. We'll still assess your work based on what you send.

Good Luck!