https://github.com/pagepro/frontend-recruitment-task-landing-page
https://github.com/pagepro/frontend-recruitment-task-landing-page
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/pagepro/frontend-recruitment-task-landing-page
- Owner: Pagepro
- Created: 2019-02-04T14:44:20.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-02-04T14:58:28.000Z (over 6 years ago)
- Last Synced: 2025-03-22T06:01:44.049Z (3 months ago)
- Size: 30.7 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[pagepro_logo]: https://raw.githubusercontent.com/Pagepro/frontend-recruitment-task-landing-page/master/logo.svg?sanitize=true "Pagepro logo"
![pagepro_logo]
# Landing Page - frontend developer recruitment task
## The task
Your job is to code a landing page. It is responsive hence you'll have to plan the structure of the HTML elements at the beginning so you don't encounter huge obstacles when working on smaller breakpoints. The source file is an `.xd` file. To open it you'll need Adobe XD software. You can download it here: [http://adobe.ly/xd](http://adobe.ly/xd).
## Source file:
[Pagepro_recruitment_task-landing_page.xd](https://github.com/Pagepro/frontend-recruitment-task-landing-page/raw/master/Pagepro_recruitment_task-landing_page.xd)
The design has been created by UI8. The original, full version can be found [on their webiste](https://ui8.net/products/responsive-resize-kit)
## Must-have:
1. Write the markup using HTML5.
2. Style the page using Sass preprocessor.
3. The website uses custom fonts. One of them is Acumin Pro. You can generate a webfont link from [Adobe Font service](https://typekit.com/fonts/acumin).
4. The second custom font is Helvetica. It is not installed on Windows devices by default, though. For that reason, you have to add Arial font as a fallback.
5. Use HTML5 validation for the newsletter subscription field.
6. All the interactive elements (buttons, links, fields, etc.) have to have their active states styled according to the UI section of the provided `.xd` file.
## Good to have:
1. Add a second-level dropdown menu for the "Discovery" item in the main menu. This should include a mobile version display which is missing a design in the `.xd` file.
2. Bootstrap your project using LibSasserPlate library.
3. Add carousel (slider) functionality to corresponding elements using a JS plugin. We recommend [swiper](http://idangero.us/swiper/) but you can use a different one (bonus points for installing via NPM or yarn and using ES6 to add it to the project).
4. The icons should be exported and used as SVG.
5. Smooth animations and transitions on the elements that require it (interactive elements, mobile menu, etc.).
6. Create the layout based on either flexbox or grid.
7. Use CSS variables.
8. Use BEM naming methodology.
## Don'ts:
1. Honestly, there's only one don't: don't use pre-existing solutions. This includes any frameworks like bootstrap, foundation. We want to see how **you** would approach a problem like grid creation, not how such a library does.
## Support the following browsers:
1. Firefox (latest)
2. Chrome (latest)
3. Edge (latest)
4. Internet Explorer 11
5. Safari (latest)
## What will we be paying attention to:
1. Validity of the HTML and CSS (Sass) markup - make sure to run your HTML code by the W3C validator.
2. Consistency in the elements naming.
3. Reusability of the elements and the styles.
4. Code repetitions and reusability (keep your code [DRY](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself)).
5. Esthetics of the custom elements - animations, transitions, mobile second-level menu (if created), etc.
6. Attention to detail.
7. Code optimization and the solution's performance.
8. Working in accordance with good practices in general.
9. Consistency of the page looks across the supported browsers.