Front-end Developer Candidate Assignment

The main objective of this assignment is to utilize HTML, CSS, and JS to build out a single, static, responsive page that includes some interactive elements.

Setup

In order to get things up-and-running with minimal effort, this assignment package is pre-configured to run a local server, as well as handle SCSS and JS compiling.

• Clone this repo.
• Using your terminal, navigate to the repo directory and run npm install to install the dependencies.
• Once finished, run npm run dev to start a local server through Browsersync. Once it's running, a window will open in your default browser with a local URL to access the local server.
• All SCSS and JS compiling will automatically happen when a file is saved. SCSS will be compiled to app.min.css, and app.js will be compiled to app.min.js.

Objectives

• Using the provided wireframes as a guide, build out a single static page.
• The page should be responsive, with styles to accommodate mobile viewports and desktop viewports, based on what's shown in the wireframes.
• On mobile viewports, the main header nav menu should collapse and set to toggle using the menu button.
• (OPTIONAL) Add modal functionality for the "Learn More" buttons shown in the "icon blocks". The modal should show an expanded version of the icon block with additional content.

Notes

• The wireframes can be found in the /_wireframes folder within this repo. A PDF is provided in case Sketch isn't available.
• The produced page doesn't need to be exact to the wireframes, in terms of margins, font sizes, copy used, etc., but should be similar and have the same overall look.
• All images used in the wireframes can be found in the /images folder.
• jQuery can be utilized, if desired. However, please refrain from using any other libraries/frameworks for handling the above objectives, such as Bootstrap, etc.
• Browser support should include all major, modern browsers, as well as IE 11.

Deliverable

• When finished, create a zip file containing the entire package (excluding the node_modules and _wireframes directories), and send it to your point-of-contact for the hiring process.