front-end

Front-end Assigment

We will evaluate you on the following parameters:

• Ability to write code that is clean, readable and easy to maintain.
• Ability to organise your code in a good project structure.
• Understanding of HTML outline and basic principles of accessibility and SEO.
• Ability to structure SCSS styles, use basic SCSS features, and take the output CSS into account.

Expected time to solve this assignment is 1 to 2 hours.

Tasks

• Optimise the HTML for better outline, context and accessibility.
• Basic styles: normalize browser styles and include Roboto font.
• Intro section: Style the section to be center aligned.
• Content sections: should be in two columns, each with image on one side and text on the other.
• Spots section: should be in four columns, with each office's information in one column.
• Make a breakpoint at 768px, below that resolution the Spots section should be in two columns and the Content sections should be full width (single column).
• At 768px the font sizes should be adjusted to be more suitable for small screens.

Setup

Install node modules

npm install

Build styles

npm run build

After the test

Consider these questions for the assignment evaluation.

• What can be done to optimise page speed and load?
• What is important to consider when optimising for accessibility and SEO?
• What is worth considering when styling for mobile vs desktop size screens?