minacava / mockup1 Goto Github PK

Mockup to web page project for udacity nanodegree

This repro tracks my progress on creating project 1 for the Udacity Nanodegree, Front-End Web Developer. https://www.udacity.com/

PROJECT 1 : Mockup to Website

Rubric

Criteria Does Not Meet Expectations Meets Expectations Exceeds Expectations (Completely Udacious) Evaluator Code does not pass the auto-evaluator with a mismatch of 8%. Code passes the auto-evaluator with a mismatch of 8% or less. Code passes the auto-evaluator with a mismatch of 1% or less. Separation of Concerns Portfolio does not completely separate structure (HTML) from design/style(CSS). Portfolio completely separates structure (HTML) from design/style(CSS). Not available Code Quality Code is not formatted with consistent, logical, and easy-to-read formatting as described in the Udacity HTML / CSS style guide, or code does not pass W3C HTML or CSS validation. Code is formatted with consistent, logical, and easy-to-read formatting as described in the Udacity HTML / CSS style guide. Code passes W3C HTML and CSS validation Not available. Project Instructions:

Write your HTML and CSS files to create a web page matching the provided mockup image, using the Bootstrap framework.

Bootstrap can be found at the following path: css/bootstrap.min.css. Please use the exact path. Tests will fail if you will use a different path for bootstrap files.

Mug image can be found at images/mug.png

TODO: determine correct font to use. Different fonts specified in the instructor notes and the lesson information. Font family is Kalimati, Verdana, sans-serif; Font family is "Lucida Grande", sans-serif

Font color for the main title and text is #666666, for subtitle - #F07C17

The border around the box under the image should be solid 1px and its color should be#CCCCCC.

You will have to find the font sizes, line spacing, margins/padding on your own.

HTML/CSS Style Guide: http://goo.gl/0EVzNy http://udacity.github.io/frontend-nanodegree-styleguide/

Warnings:

Do not try to load non-local files (like fonts, from another server) in your page. This can cause the "dubious: no message left" Another cause of that error we just discovered: if your line-height is a large value like 200%.

Note: The source mockup image is included in the repo as images/page-mock.png. mockup.html can be used to view it directly, and it was attached as an overlay to the project while under development, see alignment mismatches.

For completeness, the contents of this repo are licensed under the permissive MIT License. It should be noted that since this contains content used for a course project, reusing for that purpose would likely be contrary to the rules for being 'your own work' in the course. The MIT license would seem to allow it, the course guidlines would not.