Reference no: EM133129567
COIT 20268 Responsive Web Design
Background
World of Toys, is a sole-proprietor with a proper shop front (i.e. an actual physical building where business is conducted). They have contracted you to develop a website for their shop. You have been provided with the following initial and technical specifications.
Memo: Website Requirements
From: World of Toys, Senior Management To : WIMP Engineering R&D Consultants Specification
Design and develop a website to provide information to customers who wants to visit the shop. The goal is to allow customers to obtain an overview of the shop layout and to find details of items available from the shop. The website is not an online shopping site. The website's main goal is to provide information to customers who want to visit the shop in person.
Resources
Resources such as images and details of opening hours can be found in ProResource.ZIP. The content of the ZIP file is:
1. Four folders named board_games, lego_models, rc_toys and playing_cards. Each folder contains images relating to the different types of items indicated by the name of its folder.
2. A text file item_list.txt contains the names of the items corresponding to each of the image from each folder. You need to use these names as the given description of the items on your web site.
3. A text file shop_hours.txt containing the opening hours of the shop.
4. logo.png - image of the logo of the shop.
5. floor_plan.png - floor layout of the shop.
General Requirements
The managers insist that the following requirements must be adhered to:
1. Each webpage of the website must display the logo. You can edit this image, but the font style, type and colour must remain as in the original image.
2. Do not change the proper names of the item. Do not rename the filenames of any of the images.
3. All images of each item must be presented to the visitor. This can be done within one webpage or distributed across several web pages. The idea is to ensure that visitors are made aware of the complete selection of items available for them to visit.
4. The images are to be used as it is. You can resize the images retaining the original aspect ratio, but do not crop or edit (e.g., re- colour, touch up, sharpen, etc.) or rename the images in any way.
5. Generate a separate page providing the opening and business hours. The details are found in the shop_hours.txt file.
6. Text description for each item is not provided. You can provide your own ‘dummy' text (i.e., lorem ipsum) to demonstrate the functionality of your web page design.
What You Need to Do
To complete the given project specified in the Background section above, you are to create a prototype of a stand-alone website for a desktop computer. Design your website to be rendered by a web browser to fit a desktop computer display between 1024x768 to 1280x1024 pixels. The site must have pages that display at least three levels of information. The contents and resources have been provided in the above specification. The website will be assessed for cohesiveness, accessibility, design, and development effort.
Use any combination of HTML5 and CSS3 to develop this website. Remember to indicate which desktop browser (i.e. IE, Firefox, Safari, Chrome, etc.) you are targeting as the main working platform. DO NOT use Rapid Application Prototyping (RAD) tools or any other type of scripting languages, webpage templates or services or add-ons, e.g., Python, Lua, AJAX, Dreamweaver, Wordpress, etc. You are required to demonstrate your knowledge of HTML5 and CSS3 independently and without the assistance of automated development and visual design tools. Your website should be developed to be capable of launching directly from localised desktop computers. That is, the landing page (i.e. the first page or top page) of your website can be launched by calling or opening main.html or index.html directly from within a web browser. No web server is required for Practical Assessment 1 and 2.
Attachment:- Responsive Web Design.rar