Assignment 3: Website with responsive page layout
Unit: DGTL11005 Web Design, 2020 Term 1
Due date: 9:00 pm AEST, Friday of Week 12
Weighting: 40%
Objectives
This assessment item relates to the unit learning outcomes 1, 2, 3, 4, 5 and 6, as stated in the unit profile.
Task
You are required to design and build a website comprised of between 3 and 5 pages that provides information about a specific hobby or sport for people who are interested in taking up that recreational activity. The website must be implemented using HTML5, CSS and the Bootstrap 4 front-end web framework. Each page in the website must have a responsive layout that automatically adapts its appearance to provide an optimal viewing experience on the device on which it is being viewed.
Purpose and target audience
The purpose of the website is to provide information about a specific hobby or sport for people who are interested in taking up that recreational activity. The chosen hobby or sport must be a real activity, not a fictitious one. Consider building the website about a recreational activity that you are knowledgeable about to make the process of gathering content more convenient.
The theme of the website should not be a specific club, society or organisation associated with your chosen recreational activity. For example, the website may be about soccer, but not about a particular soccer club.
Content
The content of the website should address topics that will be of interest to the target audience. Examples include how the activity is performed, any special skills or attributes that are required, any rules governing the activity, why people enjoy it, how people can get involved, and so on.
Note that these are suggestions only. The content of the website should be genuine and accurate. Do not include fictitious information.
The website should consist of between 3 and 5 pages. The text that appears on those web pages should amount to between 700 and 900 words in total.
If you choose a computer-related recreational activity such as gaming as the theme of your website, please remember that software screenshots may not be used in your site because you do not own the copyright in those screenshots. The software publisher owns the copyright. In view of this limitation, you might prefer to choose a non-computer-related recreational activity that offers more opportunities for obtaining original images.
Design
The design of the website should be appropriate for the chosen recreational activity. For example, a website about collecting comics might have a comic book theme. A website about bushwalking might have an outdoors theme. A website about surfing might have a beach theme. These are suggestions only. Think about the distinguishing characteristics of your chosen hobby or sport. Choose images, fonts, colours, shapes, textures and other design elements that suit this theme.
It is not necessary to design a logo for the website, but it would be appropriate to give each web page some kind of header graphic that possibly incorporates the site title.
Responsive page layout required
Each page in the website must have a responsive layout that automatically adapts its appearance to provide an optimal viewing experience on the device on which it is being viewed. The site must be built with the Bootstrap 4 front-end web framework. You may not use other front-end web frameworks such as Foundation in your solution. You may not use Bootstrap templates in your solution because the website should demonstrate your own mastery of HTML, CSS and Bootstrap.
Original content required
No content (text, photographs, illustrations, etc) will be supplied to you for this assignment. You must produce your own content for the website, using the design brief as a guide. This may involve activities such as conducting research, writing text, taking photographs, or editing images.
Images
You must own the copyright in any images (photographs, illustrations, animations, etc) that you use in your website. In others words, you are restricted to using images that you have created yourself from scratch. You may not use clip-art or royalty-free images. You may not download someone else’s image from the Web. You may not scan someone else’s image from a printed publication. You may not capture a screenshot from software that someone else has created. You may not take someone else’s image and alter it to create a new image.
Text
The text in your website should be suitable for the intended purpose and target audience. You must own the copyright in the text that you use in your website. In other words, you are required to write the text yourself. If you need to quote, paraphrase or summarise the words of another author for some reason (e.g. to substantiate your statements), references must be provided in a section at the end of the relevant web page.
Technical constraints
The following technical constraints apply to this assignment.
• You are encouraged to build your website with Dreamweaver, but almost any plain text editor, HTML editor or web authoring software may be used.
• You are encouraged to create your images with Photoshop, but almost any image-editing software may be used.
• Your website should display correctly in the latest versions of Mozilla Firefox and Google Chrome on a PC and a smartphone.
• Your website must be constructed with HTML5, CSS and Bootstrap 4, not other technologies.
• Your website must use a linked external CSS file to control the appearance of the text, and it must use Bootstrap to control the layout of the pages and the navigation menu.
• The website should not attempt to conform to the 960 grid system because each page must have a responsive layout rather than a static layout.
• Your website must not be built from a template such as a Dreamweaver template. It is acceptable to study existing web pages, templates and other sources for ideas, but the code and content in your assignment solution must be your own. As a general guide, you should be able to explain the workings of any HTML or CSS code that appears in your website. If you don't know what an HTML tag or CSS property does, then you shouldn't use it in your solution.
• Your website must not contain any audio clips, video clips or other elements that require browser plug-ins.
• You are not required to upload your website to a web server. Your website must not contain any server-side scripts such as CGI, PHP, ASP or ColdFusion code.
• The files that make up your website must come to a total of no more than 8 MB, and may be considerably smaller. If your files exceed that limit, you should reduce the size of your image files. Use your image-editing software to reduce the bit depth or dimensions of your images while preserving image quality.
No report
No accompanying report is required for this assignment.
Submission
This assignment must be submitted electronically through the unit website as a single zip file named website.zip containing the directory of files (HTML files, CSS files and image files) that make up your website.
Instructions for submitting assignments electronically are available on the unit website. Before you submit your solution, copy the website from your development computer to another computer to test it. If you have inadvertently used absolute URLs instead of relative URLs in your code, or if you have used fonts that are not widely available, these problems will quickly become apparent. Also check the assessment criteria to ensure that you have covered everything that is required.
Help with creating a zip file
If you are a Windows user, you can create a zip file by right-clicking on the file(s) or folder(s) that you want to compress, selecting Send To Compressed (Zipped) Folder from the pop-up menu, and finding the newly created zip file in the same directory. To rename the zip file, rightclick it, choose Rename from the pop-up menu, and type the new name.
If you are a Mac user, you can create a zip file by right-clicking on the file(s) or folder(s) that you want to compress, selecting Compress Items from the pop-up menu, and finding the newly created zip file in the same directory. To rename the zip file, click the icon of the zip file, press the Enter key, and type the new name.
Academic integrity
The work that you submit for this assignment must be your own. You may not collaborate with other people to complete this assignment. You must not store your assignment solution in a location where others might access it. You must not request help with this assignment in any online forums outside the unit website. You may ask for help with this assignment through the online forum on the unit website, but do not post fragments of your code there. Refer to the University's Student Academic Integrity Policy and Procedure for more information.
Assessment criteria
The assessment criteria for this assignment are presented in the following table. Penalties will be applied for late submission and for failing to comply with the assignment’s requirements.
Criteria Marks
Content
• communicates the site’s key message
• supports the site’s objectives
• is appropriate for the target audience
• is informative, accurate, up-to-date and complete
• uses appropriate and inclusive language
• uses correct spelling, grammar and punctuation
• presents an appropriate amount of information on each page
• uses headings and lists where appropriate to aid scanning
• correctly references any works of other authors that have been used 8
Type
• enhances communication of the site’s key message
• supports the site’s objectives
• is appropriate for the target audience
• uses appropriate choices of typeface, size, weight, colour and texture
• avoids jagged edges with anti-aliasing
• can be read easily
• uses font combinations with sufficient contrast
• limits the number of fonts in use
• is appropriately aligned
• uses emphasis techniques such as boldface, italics and capitalisation sparingly
• uses Cascading Style Sheets correctly 8
Graphics
• enhance communication of the site’s key message
• support the site’s objectives
• are appropriate for the target audience
• display creativity and originality
• have a consistent and appropriate colour scheme
• use design elements such as line, shape, value, colour and texture appropriately
• are high quality with no unwanted halos, dithering, distortion or jagged edges
• aid fast downloads with small file sizes
• use appropriate file formats for photographs and line art and lettering
• have no missing image files
• have valid href and alt attributes in img tags 8
Page layout
• enhances communication of the site’s key message
• supports the site’s objectives
• is appropriate for the target audience
• works within different screen sizes
• uses design principles such as balance, contrast, unity, proximity, alignment and repetition appropriately
• balances text and images
• has adequate margins
• has a consistent look and feel
• uses Cascading Style Sheets correctly
• uses a responsive layout created with the Bootstrap 4 front-end web framework 8
Navigation system and site structure
• organises the content in an intuitive manner
• has a structure that is apparent and easy to visualise
• has a navigation system that is easy to use
• has navigation controls that are consistent in appearance and operation
• offers navigation alternatives
• has a link to the home page on every interior page
• has an appropriate number of links, all of which function correctly
• has concise, understandable link labels that match headings on destination pages
• has a descriptive title, logo or signature graphic near the top of each page
• has appropriate page titles within the title tags
• has appropriate page headings
• uses components from the Bootstrap 4 front-end web framework 8
Total 40