Skip to content

Latest commit

 

History

History
83 lines (56 loc) · 3.15 KB

README.md

File metadata and controls

83 lines (56 loc) · 3.15 KB
Raw

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?