This test is intended to provide an opportunity for you, an engineering applicant, to demonstrate your software engineering knowledge.

The logic you employ and the approach you take to solve the problem are the most interesting to us. Each of the given problems have at least a handful of valid solutions, and possibly other solutions weʼve never seen. So, donʼt worry about finding "the" solution. Provide a solution that you like. You should NOT use any 3rd party plugins to solve any of the exercises besides the jQuery url provided. You can use any IDE or code editor you choose, any browser for testing your code (we recommend Chrome or Firefox), and it's okay to use Google search for help.

Please review the exercises first. If anything is unclear or confusing, please contact us and we will help clarify any issues.

Most importantly, have fun!

To get started you'll fork our project at GitHub found at https://github.com/thrashr888/Frontend-Code-Test.

git clone [email protected]:<your github username here>/Frontend-Code-Test.git

Commit each exercise when you're done with it. For example:

git commit -a -m'Exercise #1'

If git is not available or GitHub is not working for you, you can download the test as a Zip file at https://github.com/thrashr888/Frontend-Code-Test/zipball/master

Create an HTML5 page with header, footer and main sections in index.html. The main section should contain a content section and a sidebar. Set the width of the content section to 660 pixels and the sidebar section to 300 pixels. Make the sidebar float to the right side of the content section.

Index.html should include these scripts:

• https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js
• test.js
• test.css

The header section should contain a nav with three links:

• Home ( index.html )
• About ( /about )
• Blog ( /blog )

You can also see the image files at http://thrashr888-img.s3.amazonaws.com/20120204-rhp7q6h6er1j2dwsm8pf3yd4pa.jpg.

In the content section of index.html, rebuild this design in HTML5 and CSS3. You don't need to perfectly match exact pixel sizes, fonts, or colors for this exercise but it should look as similar as possible. You can also use lorem-ipsum or placeholder text.

The image for the comment count can be found in the img folder (and in this GitHub repo ). You can use placekitten.com for the larger images (e.g. <img src="http://placekitten.com/140/120" />).

The sample text:

The clever staff at NextMovie realized that it's a dog's world, and have recast the nine Academy Awards Best Picture nominiees with dogs as the top award winners at the Academy Awards where the dogs are considered...

A man walking his two lap dogs off-leash in an area that had been off-leash for years until December ended up at the wrong end...

Make a new link called "Sidebar" in the nav that hides and shows the sidebar 3 seconds after you click on it. Make a new link called "Blue" in the nav that, on hover, turns all the links on the page blue except for the "Blue" link.

If you used git, commit your changes into git and push them back to the server.

git push origin master

Send us a link to your fork in GitHub and you're all done!

If you originally downloaded the files instead, please send us a zip or tarball of your project.