Assignment 1 HTML5 Web Site Prototyping This assignment is to be completed individually. No group work is allowed. This assignment provides the first step toward developing a web application by creating a set of static HTML5 pages for several core parts of the application flow. These pages serve as a look-and-feel design prototype for later functional / dynamic application development. This assignment is intended to (re)familiarize students with HTML development and navigation, as well as application design, deployment requirements, and assignment submission in the context of the course. Course Standards for Web Page Design This assignment introduces the fundamental standards for web page design in the course. In this and all subsequent assignments, the following design standards apply. 1. Pages must be valid HTML5 standard. 2. You must not use site-builder or automatic site generation tools. You must code your HTML directly, by hand. 3. All pages must validate cleanly as HTML5. 4. All pages must render sensibly cross-browser. 5. All pages must have full and complete separation of CSS into separate files only the link(s) to load the CSS should be present in the HTML document. No style definitions within the page. 6. All pages must have full and complete separation of JavaScript into separate files only the link(s) to load should be present in the HTML document. No scripting within the page. 7. All resources (CSS, JavaScript, Media) must be locally stored with the web application (e.g., local copy of JavaScript libraries). 8. Each assignment will consider coding efficiency and design choices, which includes coding elegance or style. Efficiency is required to make the best use of resources (many full pages are viewed on mobile devices). Good code design is required for maintenance, understanding, reusability, and extensibility of applications. Proper indentation for nested elements is just one example. Course staff are the final arbiters on efficiency and design choices in this context. 9. Page design choices must be sensible for use by a broad audience. Course staff are the final arbiters on sensibility in this context. Ridiculous and laughable branding / inventory may be fine. Ridiculous and laughable site design / implementation is not. Even if not explicitly or specifically mentioned in assignment requirements, points may be deducted on an assignment for poor efficiency / (code or user interface) design practices in submissions.Assignment Description: In this assignment, you will develop four HTML pages, according to the following specifications. 1. Choose a content swapping domain of interest to you. You must develop your own unique site with branding, categories, and items representative of that domain. Creativity is encouraged. 2. You are not allowed to select previously created branding / content. You must create your own. In particular, you must not use any branding / content from (1) the assignment itself; (2) the textbook; or (3) any other students in any of the sections of the course. You can use books for the content but you must create different branding and items. 3. Each of the pages specified must be a standalone, individual HTML page. And not, for example, framed or one single page with main content section visibly switching. 4. Each of the pages must be standalone, but must have a common design to preserve the look-andfeel of the site. So, some of the common look-and-feel elements will be repeated across pages. Common look-and-feel elements must render exactly the same, so there are seamless transitions with no jitter between pages for common elements. 5. You must conform to the required overall page layout structure. 6. Within each of the sections of the overall page layout structure, you may style the content differently than the representative examples (color scheme, alignment, etc.), as long as the illustrated types of content are present and represented in a reasonable and understandable way.7. All of the content must be represented using HTML directly (no JavaScript DOM generation). 8. For this assignment, we will consider the following specific design standard requirements: a. Validation of HTML5 by the following tool: http://html5.validator.nu/ b. Cross-browser checking for Firefox and Chrome Required Page Structure All pages must use the following foundational layout structure, including: Full-width containers of sensible height for (1) page header area, (2) area for user specific navigation elements, (3) page footer area. Partial-width containers of the same height sensibly divided for (1) general site navigation and (2) main content area. Page 1 Home Page Common content elements described here (navigation, header, footer) also apply to the other pages. This page should provide the following content / functionality: Filename: index.html Logo / primary branding in the header Placeholder for login name Breadcrumb for current place in site structure Representative links for user-specific navigation (sign-in, my books, my swaps, cart, etc.) o My books link must provide navigation to users books for swap page Representative links for general site navigation (home, catalog, store, about, etc.) o Categories link must provide navigation to category page o Home link must link to home page Representative footer information (copyright, etc.) Main content area should provide an introduction and overview to the site. May be more than simple text.Page 2 Categories Page This page should provide the following content / functionality in addition to common content: Filename: categories.html At least two categories of items At least three items per category All item listings should link to the same item page, as a design placeholder Note that within the main content container, category organization may be fancier than a plain list (e.g., dropdown category select box driving item display).Page 3 Item Detail This page should provide the following content / functionality in addition to common content: (Note: only one item page is needed as a representative page not a different one for every item in the category list) Filename: item.html Picture of item Item highlights, including category and average rating Item detail description Button to add the item to items for swap list o Button action should link to the books for swap items page.Page 4 My Books This page should provide the following content / functionality in addition to common content: Filename: myItems.html Main content container should provide a table structure listing a representative item, rating average (stars > 0), and description. Update button action should link to the item page Delete button should link to back to the myItems page.Assignment Submissions What to submit using Canvas (Email submissions will NOT be accepted): 1. HW1.zip - An archive of the web application views folder stored in a standard ZIP File. 2. HW1Info.pdf PDF document with the following assignment information: a. Explanation of additional features, if any. b. Explanation of status, stopping point, and issues if incomplete. c. Discuss the easy and challenging parts of the assignment. How did you overcome all or some of the challenges?