Avengers Front-End Prototype

Week THREE! - Advanced Presentation - Molly Kent & Alina To

This project focused heavily on HTML semantics, document architecture (HTML and CSS), presentation, and most importantly responsive web design. We created a responsive and clickable prototype with a mobile-first approach, then scaled our presentation to perform equally well in a desktop browser.

Since the comp was provided as a desktop view, we applied our own ideas to address the mobile UI version. Aside from images as content, all visual assets were produced via CSS or typography. They were addressed appropriately to tackle a RWD solution in the view. The only background image asset applied is in the main page header.

To test our prototype, we created and ran it through a Node Express server.

Live demo here.

The Comp

The view we completed was based on this. It was provided as a Photoshop format and as a desktop view.

From Assignment Readme.md:

Requirements

1. Semantically correct HTML is required as this will be the model for prod app integration
2. Thing in terms of 'components'; if all parts of the UI were lego blocks, who would you code that?
3. Images are to be cropped correctly and compression is to take performance into account
4. Project is to take a 'mobile first' approach to Responsive Web Design, next breakpoint snap expected at standard desktop width
5. All CSS measurements should use elastic units unless a pixel specific unit is required for both mobile and desktop
6. All code should be written from the perspective if running on a server. Relative paths to files (../image.png) will not be admissible to the assignment
7. Run your project from a server
   • Python
     • Python simple server
     • No special setup and runs great
   • Node w/Express
     • node-sass-boilerplate
     • Ignore the stuff with Sass and Grunt, we will cover that later, but you can use the Express framework and the Node server script to serve up static content if you desire

Constraints

1. Must work in all major browsers of latest versions;
   • Desktop (IE Edge, Safari, Chrome and Firefox)
   • Handheld (Safari on iOS, Chrome on Lollipop)
2. All interactions must be clearly functional
3. Links to other views need not be functional, but must look like links
4. 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.