/orchard-marketing-test

Interview test for Orchard Marketing

Primary LanguageCSS

I based this project on the Parcel JS Bootstrap v4 Boilerplate (https://github.com/Qurus/parcel) with an npm install to give me a project structure according to industry best practices using the Sass pre-processor. At every point I was diligent to check the responsive design creating the most visually pleasing design. I brought the design to life with a hover zoom on the colour images along with the required click to console.log and an opacity on hover for the shapes images along with JavaScript that opens a common modal looping through click events.

I have worked to the list of review criteria building a project with a logical structure and production grade semantic markup and styling with JavaScript to bring the design to life. I have then placed this code in my github account as suggested for bonus points.

Interface Development Test

Test instructions

Attached you will find two screenshots representing two content blocks in a page. Complete the following:

  • Build the two blocks using modern HTML5 standards.
  • Build a container area to house the two sections; there are no dimensional requirements for this although we're looking for something similar to bootstrap's .container class.
  • Use JavaScript to capture all anchor clicks, and console.log() the element which has been clicked.
  • As with any modern web-build we expect a level of interactivity/animation to be displayed on the nodes.
  • All content areas should be deemed as being populated from a CMS - so all copy lengths can vary!

Technologies

  • Any CSS-preprocessors (LESS preferred).
  • Any CSS frameworks (Bootsrap preferred).
  • If vanilla CSS is used, please include some reasoning for the decision.
  • Build tools and task runners are encouraged (i.e. grunt/gulp/webpack).

Layout

  • The layout is expected to work in the latest Chrome/FireFox/Edge versions.
  • The layout should be responsive and work on a 320px mobile device.
  • Bearing in mind that this application is expected to be responsive, the developer should consider the appropriate <meta> tags.
  • shapes.png: Each image in this section should display in a modal on click.
  • colours.png: These items should be links to new pages.

Review Criteria

We are looking for your ability to give life to static designs. During that process consider:

  • Project structure: Clean project and logical traversal.
  • JavaScript: Efficiency of code and efficacy in bringing the design to life.
  • Interface: Semantic markup and styling.
  • Git: Bonus points for submission on a github account.
  • Quality: Production-grade.

Parcel JS Bootstrap v4 Boilerplate

Created parceljs with bootstrap v4. With simple Jokes API fetch.

Installing

Juts follow the simple steps You need to parcel globally installed on your machine

git clone https://github.com/Qurus/parcel.git

cd parcel

npm install -g parcel-bundler

npm install

And

npm run start

That's it.

Deployment

parcel build entry.js --public-url ./

For more information please read parceljs official website.

Built With

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Authors

See also the list of contributors who participated in this project.