CSS Architecture Challenge

css-architecture-challenge is a code challenge for frontend developers applying for a job at IT Tick.

Scenario

So here you are! You decided to apply for a job at IT Tick and now we are asking you to help us with a simple website styling. We already setup a brand new project for you that already contains a very basic structure and setup. Your task is to finish the website by adding responsivity and apply a better CSS structure.

Technical starting point

Our team was already able to complete the following:

• Add the basic app structure
• Setup build script and development server using Gulp
• Add node-sass

Mission

• Fork this repository
• Use BEM for css selectors.
• Apply a modular CSS file architecture (We recommend ITCSS).
• Make the website responsive for extra small devices up to extra large screens (Do NOT use a framework!)
• Submit a merge request and describe your changes precisely

Bonus

• Add form validations.
• Create Extra pages using the same styles (using dummy content)
  • Contacts page
  • About page
  • Privacy page
  • Cookies page

Please note

• Write concise commit messages
• Do NOT use any CSS framework or library, write your own styles.
• Pay attention for responsive design even for extra large screens.
• Use semantic elements when possible.
• Display well in Google Chrome, Firefox, IE11 and Safari

Feel free to

• Clean styles / Improve design to have better UI and UX.
• Re-organize the codebase.
• Edit gulp configurations.
• Modify existing code.
• Add new packages.
• Add tests
• Edit README.md to add documentation.
• Fix potential bugs

Available Scripts

In the project directory, you can run:

Start development server

yarn start

Build website

yarn build