Front-end Test Project
Convert the following designs to HTML/CSS/JS (pure front-end).
Infinite scroll page
Single article page
- Create project using Chisel.
- Make it responsive using your best judgement.
- Use ITCSS and BEM naming convention.
- Use this API to display posts: https://stormy-shelf-93141.herokuapp.com/ –
_limitquery 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.
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
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 buildor
yarn buildwithout 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?