https://github.com/xfiveco/fe-wp-test
Front-end / WP test project used in recruitment
https://github.com/xfiveco/fe-wp-test
Last synced: 5 months ago
JSON representation
Front-end / WP test project used in recruitment
- Host: GitHub
- URL: https://github.com/xfiveco/fe-wp-test
- Owner: xfiveco
- Created: 2018-08-27T12:12:28.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-09-13T07:27:30.000Z (almost 8 years ago)
- Last Synced: 2025-02-17T07:16:04.788Z (over 1 year ago)
- Homepage: https://www.xfive.co/blog/how-we-hire-great-developers/
- Size: 208 KB
- Stars: 6
- Watchers: 6
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Front-end / WordPress Test Project
======================
## Project brief
Convert the following designs to HTML/CSS/JS/WordPress.
### Infinite scroll gallery
## Requirements
1. Create project using [Chisel](https://www.getchisel.co/)
1. Use HTML5 / SCSS
1. Make it responsive using your best judgement
1. Allow to choose thumbnail shape from the 4 predefined shapes (circle, square, rectangle, triangle) in the WordPress admin
1. Create custom infinite scroll effect - use custom JavaScript and PHP, don't use existing infinite scroll WordPress plugins
1. Enter enough sample images to demonstrate the effect
1. Make the page the smallest possible size - optimize images, disable jQuery or any other unnecessary scripts/stylesheets, etc.
1. Set up a virtual host with your project repository name (eg. `yourname-fewp-test.test`) so we don't have search & replace URLs when testing your project
1. Store the whole WordPress installation into the test repository. Store a database dump to it as well and a zip with `upload` folder with images used in the project.
## Design
Design is available in [Figma](https://www.figma.com/) at https://www.figma.com/file/eND2gJEU1sXfKfHawR0LyH/Xfive-Front-end-WP-Test. If you haven't already, sign up for a free Figma account, so you can work with the design.
The following images are used in the design:
- https://pixabay.com/en/new-zealand-lake-mountain-landscape-679068/
- https://pixabay.com/en/new-zealand-lake-web-kai-dock-583176/
- https://pixabay.com/en/new-zealand-doubtful-sound-fjord-583181/
- https://pixabay.com/en/sun-rise-beach-new-zealand-auckland-661541/
## Supported browsers
Ensure that the elements work and display correctly in the following browsers:
- Firefox (latest version)
- Google Chrome (latest version)
- Microsoft Edge
- Internet Explorer 11
## Coding Standards
When working on the project use consistent coding style. Try to follow what's already in Chisel - EditorConfig, stylelint, ESLint (see [Code Quality](https://www.getchisel.co/docs/development/code-quality/)), [ITCSS](https://www.getchisel.co/docs/development/itcss/), WordPress code organization, etc.
## Project Deadline
Take your time but try to deliver it within 2 weeks time. If we don't see any activity in your test repository after 2 weeks (at least initial commits), we will automatically withdraw your application.
## Quality Assurance
Use the following checklist to ensure high quality of the project.
### General
- Are all requirements set above met?
- Can the project be built using `npm run build`?
- Is the page working without any JS errors?
### Precision
- Is reasonable precision achieved?
### Browser check
- Does page display and work correctly in supported browsers?
### Valid HTML
- Is the page valid?
### Semantic Markup
- Are the correct tags being used?
### Coding Standards
- Is coding style (for HTML/CSS/JS/PHP) consistent?
### Optimization
- Are image files sufficiently compressed?
- Is CSS and JS concatenated and minified?
### Accessibility
- Are proper ALT attributes for images provided?
- Are ARIA attributes properly used?
- Is proper heading structure in place?