Skip to content

Can you do this front-end test? We are looking for talented mid-level to senior front-end developers! Check out the job description at:

Notifications You must be signed in to change notification settings

xfiveco/front-end-test

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 

Repository files navigation

Front-end Test Project

Convert the following designs to HTML/CSS/JS (pure front-end).

Infinite scroll page

inifnite scroll preview

Single article page

single artivle preview

Requirements

  1. Create project using Chisel.
  2. Make it responsive using your best judgement.
  3. Use ITCSS and BEM naming convention.
  4. 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.
  5. Use this API to display posts: https://stormy-shelf-93141.herokuapp.com/_page and _limit query parameters are available.
  6. You can add an animated transition between the infinite scroll page and the article page. Keep in mind it's an optional requirement though.
  7. When scrolling, the top header should scroll up to the top of the page and then stick to the top.
  8. We pay attention to both CSS and JS bundle sizes. Import just what you require and not the whole package.
  9. We appreciate a readable code.
  10. 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

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

Supported browsers

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

Coding standards

When working on the project use consistent coding style. Follow what's already in Chisel - EditorConfig, stylelint, ESLint (see Code Quality), ITCSS, etc.

Project Deadline

Ideally you'd finish the test project in 1 week. It shouldn't take you longer than 2 weeks.

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 or yarn build without any errors and warnings?
  • Is the page working without any JS errors?

Browser check

  • Does page display and work correctly in supported browsers?

Coding Standards

  • Is coding style (for HTML/CSS/JS) consistent?

About

Can you do this front-end test? We are looking for talented mid-level to senior front-end developers! Check out the job description at:

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published