Front-end / WP test project used in recruitment
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
README.md
xfive-fe-wp-test.jpg

README.md

Front-end / WordPress Test Project

Project brief

Convert the following designs to HTML/CSS/JS/WordPress.

Infinite scroll gallery

Xfive Front-end / WP Test Design

Requirements

  1. Create project using Chisel
  2. Use HTML5 / SCSS
  3. Make it responsive using your best judgement
  4. Allow to choose thumbnail shape from the 4 predefined shapes (circle, square, rectangle, triangle) in the WordPress admin
  5. Create custom infinite scroll effect - use custom JavaScript and PHP, don't use existing infinite scroll WordPress plugins
  6. Enter enough sample images to demonstrate the effect
  7. Make the page the smallest possible size - optimize images, disable jQuery or any other unnecessary scripts/stylesheets, etc.
  8. 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
  9. 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 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:

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), 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?