Giters

matipacheco / html_test

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Bespoke Post web exercise

Each month Bespoke Post delivers new boxes to our subscribers. This exercise is your chance to show us your HTML, CSS, & JavaScript skills by creating part of a sample page that showcases some of our boxes. There is a mockup of the page fragment here.

To complete this exercise, begin by cloning this repository. Your assignment is to build out a production-ready implementation of this page using HTML, CSS, & JavaScript. Some notes:

  • Keep in mind, our traffic is more than 50% mobile devices, so the design should be responsive. The mockup shows this content at 3 different breakpoints.
  • The green bars overlaid on the mockup represent the grid system to be used for the layout.
  • The top module is a basic "carousel" where the content can be cycled to feature 4 different products. Don't worry about implementing any sophisticated transition effects but the copy and images should change together.
  • There are images for each of the products in the images folder.
  • There is copy provided for each product below.
  • You are free to use other tools than Vanilla JS and regular CSS if you prefer so. If you do, please explain your choices.
  • We've requested your solution be "production-ready". By that we mean your solution should look like the mockup and be crafted with code quality, maintainability, and re-usability in mind.

When you are done please follow these instructions:

  1. Zip up your git repository and send it to us at: dev+jobs@bespokepost.com with "Web Engineer Test" as the subject line.
  2. If you've opted to use a tool like Sass or ES6, please provide both a folder with your source files (so we can review the code you’ve authored) and a folder with built files so we can view your solution in a browser.
  3. Do NOT post your work to a public GitHub repo and send us a Pull Request, we wouldn't want any other applicants to copy your work.

Good luck!

Product Copy (names & descriptions)

The copy to be cycled with the images:

  • Alchemy: Stock your home bar with pro-level cocktail wares.
  • Aged: A toast to the perfectly aged cocktail.
  • Refresh: Bring some class to your morning routine.
  • Weekender: Don't just get away from the crowds — stand out from them.

About