Cadent FED Aptitude Test - Markup, Style, and Pre-processors
Introduction
This exercise is designed to test your understanding of the fundamental concepts HTML and CSS. The below prompt is going to walk you through a scenario where you're going to have to view a design and then make it come to life using nothing but HTML and CSS. Here are some of the items that it will test:
- Semantic markup
- Basic selectors
- Pseduo-selectors
- Sass preprocessing & it's elements
- Style architecture
- CSS animations
Prompt
Congratulations! Someone that you cold called just accepted your offer to help them redo their website. They chose you because they took a look at your Github and knew that you had extensive experience in styling their application.
They're looking to develop a prototype that they can bring to their leaders to show them just how much updating their style can do for their brand appearance. Rather than proving out a full fledged application, they have chosen the route of doing some UI engineering and develop something to really deliver a wow!
They have a design, and they're leaving the rest up to you. Good thing you have a template that you've developed so you can get coding right away.
The first thing that they want you to work on is the sidebar of their website. Once complete, they're going to re-assess your position. Depending on the quality of work you provide, you should be in for the long term!
Tasks
- Develop the sidebar of their website based upon the design. The sidebar includes everything from the Avatar and down.
Things you must use
Your client's are pretty picky. They want you to use at least one of the each of the following:
- 1 pseudo-selector
- 1 mixin
- 1 animation
Items you will be evaluated on
- How did you architect your styles? Is there a specific convention that you typically use?
- How scale-able are those styles? Did you give them room to change the color in an instant?
- Did you choose a scale-able styling convention? Are they going to have problems with namespace clashing further on down the road?
- What kind of elements did you use in the markup? Are screen readers going to have a tough time scanning through it?
- How well did you implement some of the more accepted modern CSS attributes?
Prototype
The design team has provided you with a prototype that they exported from Sketch up onto InVision. They removed some of the other components on the screen so that they could better focus your attention to the component that needs to be worked on.
Click on the link and use the password below to access the prototype:
- Link: https://invis.io/CMQTL3U5TBS
- PW:
letsdothis!
Getting Started
This project has a complete boilerplate for you, ready to use to start developing. This boilerplate assumes you have a working knowledge of node and npm.
Fork the repository and download it locally to your machine. If you don't have node already installed, either use homebrew for a mac or use the NodeJs website.
Starting the development instance
You're going to need 2 terminal sessions open at once running 2 different processes. In the 1st terminal session, run the following:
npm run start
This will start up the development instance and reload your solution anytime a file changes. In the 2nd terminal session, run the following:
npm run style:watch
This will queue up Sass to compile all of your CSS rules down into one CSS file, every-time you make a change.
Completing the assignment
Once you feel that you have completed everything to the best of your ability, please commit your changes and upload your work to a Codesandbox of your choice and forward the link to your recruiter.
Make sure that you keep a local copy of it as that you'll be asked to review it when you come in for your in-person interview.
Good luck!