Week One - Presentation fundamentals

The project for the first week will be a combination of technical and soft development skills. We will be evaluating your ability to build a web page using the techniques that we will cover in our first week's lectures.

We want this assignment to feel like a 'week on the job.' And by that we mean, we will provide a completed comp and an expected outcome specification. It is up to you to deliver on this project specification.

The Comp

You can download the view that you are to complete here. It is provided as a Photoshop format, if you do not have access to Photoshop, other applications like Pixelmator are able to open these layered files as well.

The fonts

All the fonts used in the comp are free Google Fonts:

• Oswald: http://www.google.com/fonts/specimen/Oswald
• Lato: http://www.google.com/fonts/specimen/Lato
• Merriweather: http://www.google.com/fonts/specimen/Merriweather
• Lora: http://www.google.com/fonts/specimen/Lora

The scenario

Imagine that you are on a team working for a web development shop. You have been handed a completed comp from an outside design agency and you have this week to produce the comp into a viable clickable prototype.

The expectations is NOT to build a working version of an application, but a viable prototype of the design where we can see how this will look and feel in a browser.

The spec

As a product owner, I need a clickable prototype of the design deliverable. The final prototype must be visible in a browser.

Prototype is to use best practices in coding HTML/CSS as there is the potential that some or all of the code will made it into production.

Requirements

1. Semantically correct HTML is required as this will be the model for prod app integration
2. Although a form is not in the Comp, it is required that a registration form be placed at the foot of the view
   1. first name
   2. last name
   3. email address
   4. date of birth
   5. phone number
   6. home address
   7. permission to be added to email list
   8. submit action
3. Images are to be cropped correctly and compression is to take performance into account

Constraints

1. Must work in all major browsers of latest versions (IE Edge, Safari, Chrome and Firefox)
2. Is NOT required to be responsive
3. All interactions must be clearly functional
4. Links to other views need not be functional, but must look like links
5. JavaScript is NOT to be used

DO NOT fence yourself in with invisible constraints. Unless it is specifically listed and/or we discussed it in lecture, there is not an expectation to meet an objective that has not been set.

The expectation

The goal of this assignment is to asses your ability to engineer a semantically correct document and build out the correct supporting assets using code patterns that are stable and extensible.

Remember, as in the real world, this project will endure and the code will need to be supported. Possibly not by you, so be sure to leave good code that others can follow and update.