Purpose of Assignment
This project is the culmination of all the work you have been getting together. This includes the discovery assignment, empathy map, wireframes, and prototypes. Your website does not need to be fully functional, but it should appear correctly. Basic actions like links should work correctly.
Your web site must contain each of the following design elements
- Minimum of 5 pages (including the homepage and the other page for which you submitted wireframes). Any other secondary pages you want to include.
- HTML5 document type declaration on EVERY page
- HTML5 tags(header, footer, section, main, article, aside, nav).
- Proper use of heading levels to organize pages.
- Appropriate integration of color and visual interest elements (images, rules, multimedia, etc.).
- One custom web font.
- Use of CSS3 for page layout.
- Responsive design.
- Appropriate, meaningful inclusion of forms (although they may not function at this point).
- Unique and proper usage of page titles values on every page.
- Use of meta description tag to appropriately describe the page.
- Use mobile breakpoints. Same breakpoints as the assignments.
- Other best practices covered in class or in your assigned readings (naming conventions, naming of folders, separate CSS, etc.).
- A sitemap.xml will be required for your project. Check out this tutorial (Links to an external site.)
- You will be required to implement Google Analytics (Links to an external site.)(even if it’s nonfunctional).
- Your homepage should be named index.html.
The code you create for your web pages must meet industry standard requirements for ‘acceptable code’; code that is easy to read is easy to update and fix. Your code should:
- Have tags, attributes, and attribute values typed in all lowercase letters, and attribute values enclosed with double quotation marks. Consistently creating code using this format will only make your pages easier to debug, For example
<p align=”center”>Welcome!</p> is correct
<P ALIGN=CENTER>Welcome!</P> is incorrect
<P Align=”center”>Welcome!</P> is incorrect
<p align=center>Welcome!</p> is incorrect
- Optional closing tags should be present. Browsers vary in how forgiving they are of non-closed tags. Although your browser may display list items, table cells and paragraphs without the closing </li>, </td>, and </p> tags (respectively), your viewers’ browsers might not. Also, as we learn how to format pages with styles non-closed tags can cause confusion as formatting from one section ‘leaks’ into another.
- Make appropriate use of hard returns and indents. See my example below to recognize the visual cues this offers:
<div><p>Hello World</p><p>This is my website</p></div>
The above will display identically to the code below, but it should be clear which is easier to read and to check for errors
<p>This is my website</p>
- Complete the items listed to finish this assignment.
- Design your own web page. Do not use a template or wizard to generate this page. Please do not submit a white background page.
- Create your Project Brief in HTML5/CSS. HTML/CSS must not have any validation errors. Use the HTML validator(Links to an external site.), and CSS validator (Links to an external site.) to check your code. See HTML/CSS requirements below.
- Post your Project Brief to your web server.
- Create a .zip file that contains both the HTML and CSS files. Title the Assignment “YourName-Final-Project.zip”. Submit your zip file to Canvas assignment.
A HTML file that will contain:
- HTML 5 <doctype> tag
- Use of <header> tag
- Use of <article> tag. Content will reside inside <article> tag.
- Use of <footer> tag
- Use of appropriate usage of <h1> and <h2> tags. Use other header tags if necessary.
- Proper label within <title></title> tag
- Use of <meta description> and proper description
A CSS file that will contain:
- Must use external CSS file.
- Must style font color, at least two different font sizes
- Use of a custom web font
- Appropriate use of classes, IDs selectors
- Style groups of tags
- Style structural elements: header, footer, and article
Grading Criteria is simple. If you completed all “Required Elements” then you get highest points. If you completed some then you get mid points. If you did not complete then you will get no points.
Final Project Rubric (1)
|Final Project Rubric (1)|
|This criterion is linked to a Learning OutcomeDesign Elements
All of the design elements specified above are present.
Site has a minimum of 5 well-developed pages.
|This criterion is linked to a Learning OutcomeNavigation/Site Organization
The navigation layout and style effectively guides visitors.
Ordered or unordered lists are used appropriately.
All links are active and work properly.
Site can be hosted by extracting zip file to web root folder without any manual steps.
|This criterion is linked to a Learning OutcomePresentation
The site is aesthetically appealing.
Colors are coordinated.
Each page loads quickly.
Images and/or animation enhance, not detract, from the pages.
The site has been spell checked, and is grammatically correct.
Site builds on wireframes developed.
|This criterion is linked to a Learning OutcomeCoding
The HTML Validates.
The CSS Validates.
All of the necessary basic tags are in place.
HTML coding has been written using lowercase letters, and quotation marks are present around all attribute values.
The code is easy to read.
Use of CSS techniques studied.
|This criterion is linked to a Learning OutcomeFolder Organization
The site is completely organized in the appropriate folder structure.
There is an images folder, and all images are stored within that folder.
If needed, there are folders for sound, video, etc. files.
Site pages are organized and stored at the root level of the main folder and any other sub folders (as it fits your IA).
|This criterion is linked to a Learning OutcomeFormatting and Style
Required elements listed in the Assignment Description are present as described. Adheres to UCOL Format and Style Requirements, including Turabian Author-Date citations, if applicable.
|Total Points: 100.0|