Development task

Our project management system Basecamp allows the creation of To Do lists and Messages with comments in them.

We want you to create a Message for each newly created To Do list item within the project. If items in To Do list change (added, removed, text changed), then new comment should be added to the appropriate (previously created) Message.

Please use Basecamp Classic API, PHP (object­oriented style) and MySQL to solve this task. This will be a back­end without any interface. We plan to execute your script with one parameter – Project ID.

HTML task

Please create a simple html page with an html5 doctype and an accompanying css file which will reset browser layout. Specify basic properties for the page: h1, h2, h3, h5, h6, p, ul, li, etc. Specify typographic properties for as many elements as you wish. Please use the Droid font to display all text.

Mark up a 2­column page (100% width) with header and footer. Header and footer should also be 100% width. Make the left column’s background red and set its width to 200px. Make the right column’s background green.

Create an article in the right column which would contain:

1. h1 header
2. Some text
3. h2 header
4. 3 paragraphs of text with a right aligned image in the middle paragraph
5. Finally an ordered list of 5 random items
6. Give the footer some height and a black background to distinguish it from the rest of the page
7. Give header some height and set its background to blue
8. Add a non­floating div anywhere in the text body, set its background to yellow, then add another floating div inside that yellow div. Yellow div must be 100% of right column’s width. Make the second div’s background black; set its width and height to 20px. Make sure the yellow div doesn’t have any height specified, so it will expand if more content will be added to it.

Please make sure that the page looks right in any modern browser. By “right” we mean a proper typographic grid, where you can clearly distinguish one header from another and see where paragraph ends, etc. Both black and yellow divs must be clearly visible.