Convert the following designs to HTML/CSS/JS (pure front-end).
- Create project using Chisel.
- Make it responsive using your best judgement.
- Use ITCSS and BEM naming convention.
- Create custom infinite scroll effect - use custom JavaScript (preferably the modern JS standards and APIs). Don't hesitate to use helpful NPM packages but keep the JS bundle size low.
- Use this API to display posts: https://stormy-shelf-93141.herokuapp.com/ –
_page
and_limit
query parameters are available. - You can add an animated transition between the infinite scroll page and the article page. Keep in mind it's an optional requirement though.
- When scrolling, the top header should scroll up to the top of the page and then stick to the top.
- We pay attention to both CSS and JS bundle sizes. Import just what you require and not the whole package.
- We appreciate a readable code.
- Avoid using huge commits hiding your progress. The initial commit should be a bare Chisel install. Feel free to work on a branch and use rebase to adjust your commits before submitting the final version.
Design is available in Figma at https://www.figma.com/file/vt3EnhEv2BGCWtMW15tHl1/Xfive-Front-end-Test. If you haven't already, sign up for a free Figma account, so you can work with the design.
Prototype: https://www.figma.com/proto/vt3EnhEv2BGCWtMW15tHl1/Xfive-Front-end-Test
Ensure that the elements work and display correctly in the following browsers:
- Firefox (latest version)
- Google Chrome (latest version)
- Microsoft Edge (latest version)
- Internet Explorer 11 – in this case we don't require all the functionalities as long as the page is readable
When working on the project use consistent coding style. Follow what's already in Chisel - EditorConfig, stylelint, ESLint (see Code Quality), ITCSS, etc.
Ideally you'd finish the test project in 1 week. It shouldn't take you longer than 2 weeks.
Use the following checklist to ensure high quality of the project.
- Are all requirements set above met?
- Can the project be built using
npm run build
oryarn build
without any errors and warnings? - Is the page working without any JS errors?
- Does page display and work correctly in supported browsers?
- Is coding style (for HTML/CSS/JS) consistent?