Reference no: EM133160401

Assignment - Website Development

Overview
In this second assignment, you are required to develop your personal website from scratch, based on the design document that you created in Assignment 1. You should avoid the mistakes made by the competition from your competitive analysis.

Learning Outcomes

Knowledge:
• Recognise the importance of user analysis, content organisation, interface design, interface usability and the accessibility issues associated with multimedia and web design;
• Identify, explain and apply the design principles that underlie good multimedia and webpage design, from both a visual & content design perspective.

Skills:
• Demonstrate the appropriate use of visual and content design tools, and multimedia and web authoring software;
• Develop a sophisticated web site from scratch, using information gathering and design techniques.

Application:
• Select appropriate design principles to design multimedia products and web pages that are align with project expectations;
• Operate appropriate software packages to build multimedia products and web pages that are align with project expectations.

Values:
• Appreciate ethical behaviour in relation to multimedia and web page design, in particular issues related to copyright.

Assignment Details
In this second assignment, you are required to develop your personal website from scratch, based on the design document that you created in Assignment 1. You should avoid the mistakes made by the competition from your competitive analysis. The requirements for building the website are listed below.

All of the labs this semester are designed to help you with this assignment; learning HTML, CSS and JavaScript. Do not discount their potential to assist with parts of developing this website. For an overview of what each lab contains, please click on Moodle's "Content" section at the top of this Moodle course.

Global content requirements for all webpages on your website
Header • To identify the website as a website dedicated to you personally, provide:
o A relevant heading / title banner and/or image/logo
Footer • An appropriate and intuitive footer must be included on your website.
Navigation • There should be a clear, intuitive and consistent navigation structure on the website.
• You need to think about how you will provide navigation to the user, and whether some pages may be categorised together or not. Consider the 5 ± 2 content guideline!
• Example: "Education" and "Career" pages may be appropriately categorised together under a main page called "About" - with the 2 pages linking from it locally, or within a menu drop-down function.
• Types you can include (if applicable for your design and requirements):
• Global (Primary and maybe Secondary), Local, Footer, In-text, Utility.

Home Page Requirements

• Filename should be named "index.html".
• Home page should indicate the purpose and identity of your website immediately via:
o Short blurb of your name and your career ambition.
• Example: "Joe Bloggs. Web Designer. I create beautiful websites."
o Short paragraph (15-45 words) providing more detail regarding your career ambition.
o No other text should be present, unless providing homepage guidance/appetisers.
• It can be more creative than the rest of your web pages, but it should try to professionally represent yourself through:
o Image(s) and Visual design (Composition, Colour and Typography)
• Remember this design is to reflect your style and personality (with the focus on your career ambitions), but not at the expense of good design. First impressions count!
Contact Page Requirements
• Give this page an appropriate filename, title, heading (and subheading if required).
• You should include relevant text with links to contact you such as email and social media.
• This page must have an HTML Contact Form using the <form> element: It must:
o Be well-designed and styled with CSS, and its intent must be clear;
o Use HTML5 built-in form validation and/or JavaScript to validate the data;
o Output error messages/user feedback when there is user input errors or form submission success.
Requirements of SIX additional web pages
• In addition to the home and contact pages, you are given creative freedom to design and develop the rest of your personal website yourself with only a few specific requirements.
• You need to design and develop six more web pages for your personal website for a total of eight that specifically reflect the career focused purpose of the website.
• Some suggestions (but you may think of your own) are shown below:
o About, Achievements, Bio, Blog, Career, Design, Education, Experience, Gallery, Hobbies, Journal, Ideas, Photography, Portfolio, Testimonials, Travel.
o Note that some of these suggestions above would technically require server-side scripting to fully function. In these cases (such as a blog), create a prototype of this web page, focusing on design and layout, with sample content in place.
Content • Each web page should have:
o Appropriate filenames, titles, headings (and subheadings if required) related to their content.
o Appropriate text to complement the additional media.
o At least one relevant piece of media (image/video/audio).
Gallery

One of your six additional web pages must include an image gallery of at least six images • The gallery must be dynamic, meaning it has an interactive visual feature such as:
o Lightbox: Thumbnail images that when clicked display a larger version of that image and fades out the rest of the webpage until the image is closed.
o Rollover: Thumbnail images that when the mouse hovers over it, displays the larger version of that image.
o Slideshow: The first image displays large and the user can cycle through the images.
o Any other Dynamic Gallery that is designed and presented well.
• You may need to incorporate code (using CSS, JavaScript and/or jQuery) from:
o One of the lab exercises - the labs have 4 different galleries which you can adapt.
o Free image gallery tutorials (make sure to reference code that is not yours).
• Galleries that function well and suit the design of your website will be awarded higher marks.

Brief Report
• Together with the website, you must provide a brief report with the following details:
• Tested Browsers: Indicate the browser(s) you have tested your website in.
• Page Layout: Indicate the page layout your website has been developed in, and if your website is:
o Fixed, also indicate the minimum pixel width your fixed website fits within.
o Flexible, also indicate the minimum width the browser window can be, before the content no longer comfortably fits and feels squashed. Also indicate the optimal resolution.
o Responsive, also indicate each of the breakpoints and their width in pixels.
• Changes to Design Document: List in dot point, any changes you made to your design document and the reason you made that change.
• CSS3 Requirements: Indicate exactly where in your website you incorporated the minimum of three of the specific CSS3 visual requirements:
o Flexbox, Gradients, Grid, Multi-Column, Opacity, Outline, Rounded Corners, Shadows, Transitions, Transforms (scale, skew, and/or rotate), or Embedded Fonts.
o This will make it easier for markers to assess this requirement.

Attachment:- Website Development.rar