Live demo: https://frontend-exercise.netlify.com/

Paf frontend exercise

Translate the provided designs (for small & large viewports) into a working solution with HTML, CSS and JavaScript.

Requirements

Introduce meaning to the various elements.
Load the JSON-data and use it to render the lists.
Solution works in modern browsers and viewport-widths ranging from 320-1920px.

You are allowed to make adjustments to the design/layout if needed.

File structure

index.html          # The place to author your HTML.
src/styles.css      # The place to author your CSS.
src/scripts.js      # The place to author your JavaScript.
dist/data.js        # The JSON-data to load & use in your JavaScript.

Loading data

The JSON-data is requested from the following url:

./data.json

Designs

Small viewports

Large viewports

Development setup

Work on your solution in a codesandbox or use the provided localhost setup.

Note: You'll need Git and Node.js v10 (or higher) installed for the provided localhost setup to function.

# Clone paf-frontend-exercise.
git clone https://github.com/johanwestling/paf-frontend-exercise.git

# Change directory to where you cloned paf-frontend-exercise.
cd paf-frontend-exercise

# Start the localhost server.
npm start

Mumma6 / exercise