Frontend Recruitment Task - creating a header with a menu

The content of the task

Your task will be to create only the header and the menu (not the entire page). The main purpose of the exercise is to check how you deal with coding a PSD to HTML template.

Your solution only needs elements:

• top bar element,
• logo, search element, cart,
• category menu.

Source file

In the src folder you will find the task file in .psd format. Use it to solve the task.

What must be included in the solution?

1. Using HTML and CSS to solve the task.
2. RWD - use preferred breakpoints.
3. Mobile first approachment.
4. The task must be sent as a link to your GitHub repository.

What may be included in the solution?

1. CSS preprocessor e.g. Less,
2. Package manager with a taskrunner, e.g. Grunt,
3. External JS library / libraries - if you deem necessary.

What is worth paying attention to?

1. Correct, semantic HTML code.
2. Use a layout model - flexbox and / or grid.
3. Correct appearance on various devices, operating systems and browsers.
4. Using CSS variables.
5. Using CSS methodologies (eg SMACSS).
6. Using the version control system while working.
7. Animations on elements that may require it (eg buttons).
8. Project structure - eg separate CSS files.

What should be avoided?

1. You cannot use libraries or frameworks like Bootstrap or Foundation. We want to see how you create a layout without using them.

Browsers

The solution should work on the following browser versions:

1. Firefox (latest)
2. Chrome (latest)
3. Edge (latest)
4. Internet Explorer 11
5. Safari (latest)

What will we pay attention to when evaluating?

1. Correctness of HTML and CSS code. Check your code in the W3C Validator.
2. Consistency in the naming of elements.
3. Reusable styles and elements.
4. Reusable code (DRY rule).
5. Attention to detail.
6. Code optimization.
7. Good programming practices.
8. The page looks the same regardless of the browser.
9. Mobile first