Skip to content

Latest commit

 

History

History
85 lines (57 loc) · 3.52 KB

README.md

File metadata and controls

85 lines (57 loc) · 3.52 KB
Raw

Front-end / WordPress Test Project

Project brief

Convert the following designs to HTML5 / CSS3 / JavaScript / WordPress.

Thumbnails

Xfive Gallery Test Thumbnails

Overlay

Xfive Gallery Test Overlay

Requirements

  1. Create project using our custom development tool Chisel. (If you have troubles installing Chisel, let us know before spending too much time on it. We can agree on a different approach to the test.)
  2. Convert design and make it responsive so it looks and works nice. The 1920px resolution of the design is a reference resolution we compare your conversion to.
  3. Create a hover effect for the image thumbnails.
  4. Create a simple custom overlay for photos using JavaScript. Don't use external JavaScript libraries, jQuery or jQuery plugins.
  5. Allow to choose thumbnail shape from the 2 predefined shapes (circle, square) in the WordPress admin and enter enough sample images to demonstrate the effect.
  6. 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.
  7. 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.
  8. Commit the initial files after Chisel setup separately. Continue committing in small logical steps so we can track down your changes.

Design

Design is available in Figma at https://www.figma.com/file/XmLxW928QcDblZul5dGpLM/Xfive-Gallery-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:

  • Google Chrome (latest version)
  • Firefox (latest version)
  • Microsoft Edge

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. Remove or replace default styles which are not needed.

Project Deadline

Deliver project within 1 week time.

Quality Assurance

What you need to do to get high QA score? Simply answer Yes to all these questions:

General

  • Are all requirements set above met?
  • 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 the page using a consistent HTML coding style?
  • Is the page using a consistent CSS coding style?
  • Is the page using a consistent JS coding style?

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?