It 248 final website project
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.
TOPIC:
Winter in New York City.
INSTRUCTIONS & REQUIREMENTS:
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
please note that because text is not being used to deliver information, the presentation of the topic will rely solely upon the visual experience
Before coding, please review the wireframe examples on pages 3 and 4 for possible structural ideas; then, sketch an outline of each page on paper. Additionally, you can download the Structural Starter Page file via the assignment link in Canvas.
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.
Three-Column Wireframe, Example 1
Column 2
Content
Column 1
Nav.
Column 3
Content
Header
Footer
Three-Column Wireframe, Example 2
Single-Column Wireframe (Mobile Only)
Column 2
Content
Column 1
Content
Column 3
Content
Header
Footer
Navigation
Header
Navigation Links
Content
Footer
