The purpose of this project is to demonstrate effective use of the basic HTML5 and CSS3 code discussed in chapters 2 - 7, and implement the elements and principles of visual design reviewed in the course.
The Final Website Project must adequately present the subject "Winter in New York City" by effectively applying HTML, CSS, and the basic principles and elements of visual design.
In building the structure of the site, four (4) HTML pages must be created
- three (3) pages for content
- one (1) page for references and image attribution
- each page must include basic and semantic structural elements including, but not limited to
o paragraph, span, blockquote, lists, and headings
o div, header, nav, main, and footer
o please note that not all basic elements (paragraph, lists, etc.) need to be used on every page; however, it is highly effective to use the semantic structural elements on every page to help facilitate continuity across the pages
- each page must include working navigation links to all other pages
- the footer section of each page must include the student's name, link to the student's email address, and copyright information
For styling, one (1) single external style sheet must be used
- the file must contain all styles for displaying a three-column layout
- responsive techniques must be applied using percentages and/or em units
- width and height for all images should be coded using CSS
- implement padding to avoid content collisions
- embedded styles, inline styles, and phrase elements should NOT be used to style the pages; external CSS must be used exclusively.
Content must consist of placeholder text and images
- lorem ipsum placeholder text should be applied
o use the lipsum.com text generator (click the button on the page that says "Generate Lorem Ipsum" to generate text)
o all text must use lorem ipsum except the name, email, copyright, and references/image attribution texts
- Creative Commons images
o A minimum of six (6) different images must be used in the site
o All images must be covered under a creative commons license and be properly attributed in the last page of the site. Some useful sites for finding images include:
- http://www.flickr.com/creativecommons/
- http://search.creativecommons.org/
- http://photopin.com/
- How do you attribute CC licensed images?
- https://wiki.creativecommons.org/Best_practices_for_attribution
- Instructor attribution example
o the line below the image shows the proper information required
o All images must maintain a resolution appropriate for their specific applications, and be properly scaled
The basic principles and elements of visual design must be executed
- the site should effectively demonstrate use of visual design principles and elements including, but not limited to
o alignment and proximity
o balance and contrast
o color and typography
o line, shape, and form
EXTRA CREDIT:
Create a second external style sheet to optimize the project for mobile display, implementing a single-column layout but maintaining a consistent design between it and the desktop version.
In the head section of each HTML file
- add the viewport meta tag
o must include the name and content attributes
- set the content width to device-width and initial scale to 1.0
- add another link element to implement the mobile style sheet
- add the media attribute to each of the link elements
o media types should include only screen
o media features should be min-width of 1024px for the desktop style sheet
o media features should be max-width of 1023px for the mobile style sheet
NOTE: Failure to follow the project instructions, including submission and formatting requirements, may result in the deduction of points. Please refer to the Saving and Submitting Assignments page in Canvas for specific requirements, and/or contact your instructor for additional information.