+1-415-670-9189
info@expertsmind.com
Develop your personal website from scratch
Course:- Web Project
Reference No.:- EM132336923




Assignment Help
Expertsmind Rated 4.9 / 5 based on 47215 reviews.
Review Site
Assignment Help >> Web Project

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. The requirements for building the website are listed further below.

Learning Outcomes Assessed
The following course learning outcomes are assessed by completing this assessment:

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.

Semester Overview

This semester you are required to design and develop a Personal Website that is:
- About yourself and your career ambitions;
- Small, unique and professional in appearance;
- A portfolio of your achievements; and
- A showcase to future potential employers.

This task runs the entire semester and is broken down into two assignments and one in-class assessment.

Assessments Overview

Assignment 2 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.

Website Overall Requirements
This website has a number of requirements which are detailed in the table below; you should adhere to these requirements when working on your assignments.

General Requirements
- You must not use any existing complete templates, or frameworks that assist such as bootstrap.
o You will receive a ZERO score for the global website design, HTML and CSS marking criteria if you do so, and may even be considered as plagiarism.
- You are expected to create your website by yourself hand-coding HTML, CSS and JavaScript.
o (Lab and lecture materials and resources can be used to help you with your website, BUT your design should be your own, not for example the design/layout of lab exercise.)
- You may not develop the website using server-side scripting languages, such as PHP, ASP, etc.
- Your design should focus on design rules learned during this course such as
o Rules of good visual design;
o Usability guidelines related to Colour, Typography, Placement of objects, Readability and Balance.
o A solid understanding of the use of other elements such as; contrast, white space, layout, focal point, alignment, proximity, etc.
- All text should follow the rules of writing for the web, including appropriately "chunked" content, use of Plain Language and the "Inverted Pyramid" style of writing.
- Images, sound, and other media file sizes optimised for download and display.
- Well-designed unique and creative websites will be awarded appropriately.

HTML

- All html files must begin with the <!DOCTYPE html> declaration, to indicate HTML5 adherence.
- The structure of your website should be built using HTML5 tags styled with CSS where applicable:
o <header>, <nav>, <section>, <article>, <aside>, <footer>, <figure>, <figcaption>
o HTML <div>'s can be used for other structural elements.
o Do not use a <div> where a standard semantic tag would be appropriate, such as for example the <h1> to <h6> tags for headings.
o HTML <table>s should be avoided for structure.
o Use id and class where necessary.
- Any HTML <form> used on the site should:
o Be well-designed and styled with CSS, and their intent must be clear;
o NOT use PHP or other server side technologies. Functionality of such forms may therefore be limited, and only have partial functionality (prototype stage), but should be fully designed, and;
o Contain data validation, error messages, user feedback etc. (either in a pop-up window, simple dialog boxes written with JavaScript, and/or built-in HTML5 validation)
CSS - All content should be formatted and styled using an external cascading stylesheet (CSS).
o This is to keep content and style strictly separated.
o A max of 2 external stylesheets are allowed. Lower scores awarded if you exceed this.
- Must incorporate at least THREE of the CSS3 styles below in a way that improves your web design:
o Transitions, Transforms (scale, skew, and/or rotate), Rounded Corners, Multi-Column,
Opacity, Shadows, or Gradients
o Embedded CSS3 @font-face Fonts (or using Google / Adobe Fonts API is also acceptable)
JavaScript / jQuery - JavaScript, jQuery and their libraries are allowed to be used (and some image galleries may require these languages) as long as it is all functional on the client side.
- No server-side scripting languages.
- You can use external sources of code/tutorials to help you with this, but you must reference the use of this code.
(Optional Challenge) Responsive Design - Try to make your website responsive, suitable for three different resolutions using @media queries.
- Use three common breakpoints, each changing the styles to suit the new resolution width.
- For example:
o 600 pixels and lower
o 601 pixels to 960 pixels
o 960 pixels and higher

Header - To identify the website as a website dedicated to you personally, provide:
o A relevant heading / title banner and/or image/logo
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!
o Example: An "Education" and "Career" webpage may be appropriately categorised together under a main page called "About" - with the 2 pages linking from it locally, or within a main menu drop-down function.
- Types you can include (if applicable for your design and requirements):
o Global (Primary and maybe Secondary), Local, Footer, In-text, Utility.
Footer - An appropriate and intuitive footer must be included on your website.

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 body text should be present.
- 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:
- Indicate the preferred browser and resolution for your website.
- List in dot point, any changes you made to your design document and the reason you made that change.
- Indicate exactly where in your website you incorporated the CSS3 requirements. This will make it easier for markers to assess this requirement.

Folder Structure
- html - This folder will hold all of the .html files and have the following folders inside it:
- css - to hold the .css file(s)
- files - to hold any files that do not belong in another folder
- images - to hold all image files
- scripts - to hold any JavaScript files
- This will make it easier for you to manage and easier for markers to access your files.

Submission
Before submission, you should first test your website on a different computer to where you worked on it. This will confirm whether links, images and other media are referenced relative to the html file location, and not an absolute address on your personal computer!

Please refer to the "Course Description" for information regarding; late assignments, extensions, special consideration, and plagiarism. Students are reminded that all academic regulations can be accessed via the universities Website.

Attachment:- Website Development.rar




Put your comment
 
View Conversion
Minimize
  1. user image
    len2336923

    CSS 20 15 10 5 0 • Requirements: 2 CSS files max. 3 well used and complimentary CSS3 styles/visual effects • Styles: Mostly external. Inline, embedded used only where appropriate. Unused styles should not be present. • Comments: inline comments including referencing source code where appropriate. Folder Structure 6 4.5 3 1.5 0 • Requirements: logical file structure of html, css, images, files, and scripts folders/files Brief Report 6 4.5 3 1.5 0 • Documented: CSS3 elements, preferred browser, resolution, Design Doc changes/reasons

  2. user image
    len2336923

    Navigation 16 12 8 4 0 • Intuitive: Good usage of different types of navigation, good labels, categorisation, and consistency • Design & Functionality: Colours, rollover effects, complimentary website styles, broken/problem links Overall Website Design 50 37.5 25 12.5 0 • Content Design: layout, consistency, balance, harmony, optimised images (filesize/dimensions) • Visual Design: composition (balance, contrast, focus, harmony, motion, simplicity, space), colour, typography • Excellence: Unique / Creative. Also award working responsive design appropriately in this marking section • Proofreading/Editing: Typos, errors, writing for the web practices

  3. user image
    len2336923

    Header 8 6 4 2 0 • Identification: Header exists, is relevant and identifies website to student • Design: Header is attractive and suits the website styles Footer 4 3 2 1 0 • Relevant: Footer exists, is relevant and has intuitive content for a footer • Design: Footer is attractive and suits the website styles

  4. user image
    len2336923

    Gallery on one Web Page 16 13.5 9 4.5 0 • Functionality: Working Lightbox, Rollover, Slideshow or other Dynamic • Design: Suitable, harmonius, and balanced with the website design • Content requirements: at least 6 images

  5. user image
    len2336923

    Six Additional Pages 18 13.5 9 4.5 0 • Webpage Identification: filenames, titles, headings (and subheadings) • Content requirements: Appropriately chunked text and at least one piece of media for each webpage • 5 marks deducted for each page missing completely (not including home & contact, there should be 6)

  6. user image
    len2336923

    Section Marked Excellent Good Acceptable Poor Not Attempted Home Page 20 15 10 5 0 • Webpage Design: Good first impression, visual appeal • Content requirements: Short blurb (name and ambition), expanded paragraph • Site identification: clear website purpose, appropriate title & heading, filenameContact Page 16 12 8 4 0 • Webpage Identification: filenames, titles, headings (and subheadings) • Design: Suitable, harmonious, and balanced with the website design • Content requirements: Prototype contact form with full validation via HTML5/JavaScript, & email/social

  7. user image
    len2336923

    Each Criterion below can be awarded from full marks for excellent, to zero marks for not attempted (partial marks between categories can also be awarded). You will receive marks and feedback within two weeks of submission, uploaded to your Moodle submission. This guide can be used as a good checklist before submission. Remember that the best design documents are ones that can be passed to another person and that person is able to develop the website as envisioned without your assistance.

  8. user image
    len2336923

    Submission Before submission, you should first test your website on a different computer to where you worked on it. This will confirm whether links, images and other media are referenced relative to the html file location, and not an absolute address on your personal computer! Please refer to the “Course Description” for information regarding; late assignments, extensions, special consideration, and plagiarism. Students are reminded that all academic regulations can be accessed via the universities Website.



Ask Question & Get Answers from Experts
Browse some more (Web Project) Materials
Some Websites use breadcrumb control in Web pages to help an end user navigate a Website. Compare and contrast the usability of a Website that uses a breadcrumb trail heuris
As your text states, anyone can put anything on the Web. To evaluate the quality of Web sites, we can think in terms of five criteria for evaluating the credibility of websi
As a web developer, choosing an appropriate hosting provider for your client or business is one of the most important steps in the development process. Analyze the services
If a worksheet is saved as a Web Page, and you want to jump from the worksheet to another file or location on the internet, you need to insert which of the following into th
Web Application Development-COMP- Read the scenario, understand and design a portfolio and Create dynamic user-interface elements, including simple rollovers and complex navig
Create an API mashup web design project in bootstrap only. The objective of this project is to generate an interaction Google map which will display the location of search so
Considering all reading and course discussions, design the physical security requirements for a privately owned three-story office and paper and computer storage facility.
To create a simple web page you will need to use a text processor (Notepad) and HTML (hypertext markup language). Do NOT use Word which can create some problems by automati