Code Monkey home page Code Monkey logo

front-end-dev-test's Introduction

front-end-dev-test

Intro

Congratulations on making it to the testing phase of the hiring process! For this part, we would like to learn about your creativity, how well you code, and how well you follow instructions.

You will need to have knowledge of some key things before you start:

  • how to run a local server
  • how to connect your markup to your scripts and styles
  • front end web development

We have supplied an optional development server and some development dependencies for this project, but feel free to use the development framework of your choice (e.g. create-react-app, vue cli, etc). You are not required to use the codebase provided in this repository, but feel free to use it! If you choose to use this codebase, you can run the development server using the commands found below:

  npm install
  npm start

NOTE: You will need node and npm on your machine if you choose to use the supplied server, also for hosting you will need to set it up yourself.

Instructions

The goal of this project is to create a client website that has some key features requested by the client (i.e. Rooster Grin as the client).

Please clone this repo and submit a link to the new project's repo along with any instructions for viewing the final product. It is not required to host this project anywhere, but it would be nice to view your project via a link rather than having to run the build locally.

A .jpg of the mockup and the assets are in the provided .zip folder.

Requirements

Please read through ALL the requirements before starting your project

Below are the design requirements:

  1. Mockups are followed
  2. Carousel in last section
  3. Attention to detail
  4. Mobile Responsive
  5. Animations

Though the main requirement is to follow the mockups, we don't require that it to be pixel perfect. We encourage you to be creative as well with this test, you have some design freedom with the assets provided and feel free to add as many animations as you like. We usually face a lot of ambiguity when developing and designing for our clients so we have left some things up to you to see how you design.

Below are the technical requirements:

  1. Modular and concise code
  2. Fully functional capabilities of built features
    • We should not be seeing errors when we click on buttons
  3. Understanding best practices of web development
    • Naming conventions and styling
  4. Best use of images and assets
  5. Use of a grid system

As for the technology that you should use its up to you. ๐Ÿ˜Ž

Required Features:

These required features are requested specifically by the client and should be implemented.

  1. Fade In Effect for the hero title
  2. Subtle animation on the four icons
  3. Fully Functional Site

Bonus (optional) Features:

  1. Use of dev server
  2. Front end framework
  3. Dynamic backend from a CMS

Please also submit a small write up discussing (leave answers to a sentence or two):

  1. What you technologies you used and why (if you only used html, css, and js please explain any templates or frameworks you may have used i.e. bootstrap)
  2. Any struggles you faced when developing with technology you chose
  3. What you enjoyed the most and why

If you have any questions please feel free to email me (Matt) at [email protected]

front-end-dev-test's People

Contributors

mattlaguardia avatar mcheng09 avatar slalexander92 avatar spragala avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.