ezzygemini / elcbrandthemingtest

Coding exercise for Estee Lauder

ELC Coding Test

The ELC Brand Theming Coding Test is a way for you to demonstrate your strong UX and design sensibilities, while following pixel-perfect design specifications. PLEASE READ ALL INSTRUCTIONS BELOW BEFORE STARTING.

The Task

You have been provided the below link to the desktop and mobile designs for a Clinique Single Product Page:

https://www.figma.com/file/bDSoyAhNv8hhvEs0PPTS3v/ELC-Theming-Coding-Test

NOTE: To access this link, you must create a free Figma account, or use an existing Google account.

Your task is to use HTML/CSS/SCSS, including the BEM (Block Element Modifier) methodology (https://en.bem.info/methodology/), to translate these specs into a pixel-perfext UI.

Specifically, you are styling all of the following React components found in the starter code:

• src/Product.js
• src/ProductImage.js
• src/ProductPurchase.js
• src/ProductDesc.js

DO NOT STYLE OR MAKE ANY EDITS TO THE MENU. The navigation menu (src/Menu.js) has already been styled and is not included in the test.

Additional Notes:

• THIS IS NOT A REACT/JAVASCRIPT CODING TEST. You should only need to use HTML/CSS/SCSS to accomplish this task.
• In the Figma design, click on Code and then CSS, (in the top right of the page) to view the pixel dimensions for all elements.
• Feel free to add additional DOM elements as needed.
• All styles should be added to src/styles/product.scss, but feel free to create additional scss files as necessary.
• All font files have been included under src/fonts and can be found in src/styles/fonts.scss. DO NOT USE ANY OTHER FONTS.
• All necessary images and icons have been provided in the src/images folder. Feel free to re-export any images from Figma, but please use HTML/CSS/SCSS to style everything else.
• Please make sure your submission is responsive. DO NOT build a separate mobile and desktop version.
• Remember to use BEM!

Getting Started

Prerequisites

• NodeJS >= 8.10
• Yarn

Step 1 - Node Modules

The first thing you need to do to get this app working is to install the node modules with the following command:

yarn

Step 2 - Running the App

After installing the Node modules, you can run the app in development mode with this command:

yarn start

Open http://localhost:3000 to view the product page in the browser.

Additional Submission Guidelines

• Please DELETE the node_modules folder prior to sending your code for review
• If any additional commands are necessary to run your code, please make sure this is documented