Convert the following designs to HTML5 / CSS3 / JavaScript / WordPress.
- 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.)
- 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.
- Create a hover effect for the image thumbnails.
- Create a simple custom overlay for photos using JavaScript. Don't use external JavaScript libraries, jQuery or jQuery plugins.
- 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.
- 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. - Store the whole WordPress installation into the test repository. Store a database dump to it as well and a zip with
uploadfolder with images used in the project. - Commit the initial files after Chisel setup separately. Continue committing in small logical steps so we can track down your changes.
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:
- 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/
Ensure that the elements work and display correctly in the following browsers:
- Google Chrome (latest version)
- Firefox (latest version)
- Microsoft Edge
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.
Deliver project within 1 week time.
What you need to do to get high QA score? Simply answer Yes to all these questions:
- Are all requirements set above met?
- Is the page working without any JS errors?
- Is reasonable precision achieved?
- Does page display and work correctly in supported browsers?
- Is the page valid?
- Are the correct tags being used?
- 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?
- Are image files sufficiently compressed?
- Is CSS and JS concatenated and minified?
- Are proper ALT attributes for images provided?
- Are ARIA attributes properly used?
- Is proper heading structure in place?