ICTWEB505 Develop complex web page layouts

Unit Pre-Assessment Checklist (UPAC) 

UAT 1 – Unit Knowledge Test (UKT)

Purpose of the checklist

The pre-assessment checklist helps students determine if they are ready for assessment. The trainer/assessor must review the checklist with the student before the student attempts the assessment task. If any items of the checklist are incomplete or not clear to the student, the trainer/assessor must provide relevant information to the student to ensure they understand the requirements of the assessment task. The student must ensure they are ready for the assessment task before undertaking it.

Section 1: Information for Students

• Please make sure you have completed the necessary prior learning before attempting this assessment.
• Please make sure your trainer/assessor clearly explained the assessment process and tasks to be completed.
• Please make sure you understand what evidence is required to be collected and how.
• Please make sure you know your rights and the Complaints and Appeal process.
• Please make sure you discuss any special needs or reasonable adjustments to be considered during the assessment (refer to the Reasonable Adjustments Strategy Matrix and negotiate these with your trainer/assessor).
• Please make sure that you have access to a computer and the internet (if you prefer to type the answers).
• Please ensure that you have all the required resources needed to complete this Unit Assessment Task (UAT).
• Due date of this assessment task is according to your
• In exceptional (compelling and compassionate) circumstances, an extension to submit an assessment can be granted by the trainer/assessor.
• Evidence of the compelling and compassionate circumstances must be provided together with your request for an extension to submit your assessment work.
• Request for an extension to submit your assessment work must be made before the due date of this assessment task.

Section 2: Reasonable adjustments

• Students with carer responsibilities, cultural or religious obligations, English as an additional language, disability etc. can request for reasonable adjustments.
• Please note, academic standards of the unit/course will not be lowered to accommodate the needs of any student, but there is a requirement to be flexible about the way in which it is delivered or assessed.
• The Disability Standards for Education requires institutions to take reasonable steps to enable the student with a disability to participate in education on the same basis as a student without a disability.
• Trainer/Assessor must complete the section below “Reasonable Adjustment Strategies Matrix” to ensure the explanation and correct strategy have been recorded and implemented.
• Trainer/Assessor must notify the administration/compliance and quality assurance department for any reasonable adjustments made.
• All evidence and supplementary documentation must be submitted with the assessment pack to the administration/compliance and quality assurance department.

Reasonable Adjustment Strategies Matrix (Trainer/Assessor to complete)
Category	Possible Issue	Reasonable Adjustment Strategy (select as applicable)
¨ LLN	¨ Speaking ¨ Reading ¨ Writing ¨ Confidence	¨ Verbal assessment ¨ Presentations ¨ Demonstration of a skill ¨ Use of diagrams ¨ Use of supporting documents such as wordlists
¨ Non-English Speaking Background	¨ Speaking ¨ Reading ¨ Writing ¨ Cultural background ¨ Confidence	¨ Discuss with the student and supervisor (if applicable) whether language, literacy and numeracy are likely to impact on the assessment process ¨ Use methods that do not require a higher level of language or literacy than is required to perform the job role ¨ Use short sentences that do not contain large amounts of information ¨ Clarify information by rephrasing, confirm understanding ¨ Read any printed information to the student ¨ Use graphics, pictures and colour coding instead of, or to support, text ¨ Offer to write down, or have someone else write, oral responses given by the student ¨ Ensure that the time available to complete the assessment, while meeting enterprise requirements, takes account of the student’s needs
¨ Indigenous	¨ Knowledge and understanding ¨ Flexibility ¨ Services ¨ Inappropriate training and assessment	¨ Culturally appropriate training ¨ Explore understanding of concepts and practical application through oral assessment ¨ Flexible delivery ¨ Using group rather than individual assessments ¨ Assessment through completion of practical tasks in the field after demonstration of skills and knowledge.
¨ Age	¨ Educational background ¨ Limited study skills	¨ Make sure font size is not too small ¨ Trainer/Assessor should refer to the student’s experience ¨ Ensure that the time available to complete the assessment takes account of the student’s needs ¨ Provision of information or course materials in accessible format. ¨ Changes in teaching practices, e.g. wearing an FM microphone to enable a student to hear lectures ¨ Supply of specialised equipment or services, e.g. a note-taker for a student who cannot write ¨ Changes in lecture schedules and arrangements, e.g. relocating classes to an accessible venue ¨ Changes to course design, e.g. substituting an assessment task ¨ Modifications to physical environment, e.g. installing lever taps, building ramps, installing a lift
¨ Educational background	¨ Reading ¨ Writing ¨ Numeracy ¨ Limited study skills and/or learning strategies	¨ Discuss with the Student previous learning experience ¨ Ensure learning and assessment methods meet the student’s individual need
¨ Disability	¨ Speaking ¨ Reading ¨ Writing ¨ Numeracy ¨ Limited study skills and/or learning strategies	¨ Identify the issues ¨ Create a climate of support ¨ Ensure access to support that the student has agreed to ¨ Appropriately structure the assessment ¨ Provide information or course materials in accessible format, e.g.  a textbook in braille ¨ Changes in teaching practices, e.g. wearing an FM microphone to enable a student to hear lectures ¨ Supply of specialised equipment or services, e.g. a note- taker for a student who cannot write ¨ Changes in lecture schedules and arrangements, e.g. relocating classes to an accessible venue ¨ Changes to course design, e.g. substituting an assessment task ¨ Modifications to physical environment, e.g. installing lever taps, building ramps, installing a lift

Unit Assessment Task (UAT)

Assessment Task 1 - Unit Knowledge Test (UKT)

Assessment type:

• Written Questions

Assessment task description:    

• This is the first (1) unit assessment task you have to successfully complete to be deemed competent in this unit of competency.
• The Unit Knowledge Test is comprised of five (5) written questions.
• You must respond to all questions and submit them to your Trainer/Assessor.
• You must answer all questions to the required level, e.g. provide the number of points, to be deemed satisfactory in this task.
• You will receive your feedback within two weeks - you will be notified by your Trainer/Assessor when results are available.

Applicable conditions:   

• This knowledge test is untimed and are conducted as open book tests (this means you are able to refer to your textbook during the test).
• You must read and respond to all questions.
• You may handwrite/use computers to answer the questions.
• You must complete the task independently.
• No marks or grades are allocated for this assessment task. The outcome of the task will be Satisfactory or Not Satisfactory.
• As you complete this assessment task you are predominately demonstrating your written skills and knowledge to your trainer/assessor.
• The trainer/assessor may ask you relevant questions on this assessment task to ensure that this is your own

Resubmissions and reattempts: 

• Where a student’s answers are deemed not satisfactory after the first attempt, a resubmission attempt will be allowed.
• You must speak to your Trainer/Assessor if you have any difficulty in completing this task and require reasonable adjustments (e.g. can be given as an oral assessment).
• For more information, please refer to your RTO Student Handbook.

Location:

• This assessment task may be completed in a learning management system (i.e. Moodle) or independent learning environment.
• Your trainer/assessor will provide you further information regarding the location for completing this assessment task.

     

Instructions for answering written questions:

• Complete a written assessment consisting of a series of questions.
• You will be required to correctly answer all the questions.
• Do not start answering questions without understanding what is required from you. Read the questions carefully and critically analyse them for a few seconds, this will help you to identify what is really
• Your answers must demonstrate an understanding and application of relevant concepts, critical thinking, and good writing skills.
• Be concise to the point and write answers according to the given word-limit to each question and do not provide irrelevant information. Be careful, quantity is not quality.
• Be careful to use non-discriminatory language. The language used should not devalue, demean, or exclude individuals or groups on the basis of attributes such as gender, disability, culture, race, religion, sexual preference or age. Gender inclusive language should be used.
• When you quote, paraphrase, summarise or copy information from the sources you are using to write your answers/research your work, you must always acknowledge the source.

How your trainer/assessor will assess your work?

• This assessment task requires the student to answer all the questions.
• Answers must demonstrate the student’s understanding and knowledge of the unit.
• If all assessment tasks are deemed Satisfactory (S), then the unit outcome is Competent (C).
• If at least one of the assessment task is deemed Not Satisfactory (NS), then the unit outcome is Not Yet Competent (NYC).
• Once all assessment tasks allocated to this Unit of Competency have been undertaken, trainer/assessor will complete an Assessment plan to record the unit outcome. The outcome will be either Competent (C) or Not Yet Competent (NYC).
• The “Assessment Plan” is available with the Unit Assessment Pack (UAP) – Cover Sheet.

Purpose of the assessment

This assessment task is designed to evaluate student’s knowledge essential to develop complex web page layout, using a range of features from various, appropriate languages & Knowledge regarding to the following:

• Knowledge of what responsive web design principle is designed to achieve.
• Knowledge of accessibility web design principle.
• Knowledge of W3C standards.
• Knowledge of role of Hypertext Transfer Protocol (HTTP) in communication across the internet.
• Knowledge of cross-browser testing.

Assessment Task 1 - Unit Knowledge Test (UKT)

Instructions:

• This is an individual assessment.
• The purpose of this assessment task is to assess the students’ knowledge essential to develop complex web page layout, using a range of features from various, appropriate languages.
• To make full and satisfactory responses you should consult a range of learning resources, other information such as handouts and textbooks, learners’ resources and slides.
• All questions must be answered in order to gain competency for this assessment.
• You may attach a separate sheet if required.
• You must include the following particulars in the footer section of each page of the attached sheets:
  • Student ID or Student Name
  • Unit ID or Unit Code
  • Course ID or Course Code
  • Trainer and assessor name
  • Page numbers
• You must staple the loose sheets together along with the cover page.
• You must attach the loose sheets chronologically as per the page numbers.
• Correction fluid and tape are not permitted. Please do any corrections by striking through the incorrect words with one or two lines and rewriting the correct words.

Resources required to complete the assessment task:

• Computer
• Internet
• MS Word
• Printer or e-printer
• Adobe acrobat/reader
• Learning management system

Questions:

Question 1: Explain in a short paragraph what the responsive web design principle is designed to achieve. Paragraph word-limit (30-50 words)

Question 2: Explain in a short paragraph what the accessibility web design principle is designed to achieve. Paragraph word-limit (30-50 words)

Question 3: Explain in a paragraph what each of the following W3C standards are used for in web design, and the current versions of each: Paragraph word-limit (30-50 words)

Hypertext Mark-up Language (HTML)

Cascading Style Sheets (CSS)

Web Content Accessibility Guidelines (WCAG)

Question 4: Explain in a short paragraph what the role of Hypertext Transfer Protocol (HTTP) plays in communication across the internet. Paragraph word-limit (30-50 words)

Question 5: Explain in a short paragraph what cross-browser testing is. Paragraph word-limit (30-50 words)

Unit Pre-Assessment Checklist (UPAC) 

UAT 2 – Unit Project (UP)

Purpose of the checklist

The pre-assessment checklist helps students determine if they are ready for assessment. The trainer/assessor must review the checklist with the student before the student attempts the assessment task. If any items of the checklist are incomplete or not clear to the student, the trainer/assessor must provide relevant information to the student to ensure they understand the requirements of the assessment task. The student must ensure they are ready for the assessment task before undertaking it.

Section 1: Information for Students

• Please make sure you have completed the necessary prior learning before attempting this assessment.
• Please make sure your trainer/assessor clearly explained the assessment process and tasks to be completed.
• Please make sure you understand what evidence is required to be collected and how.
• Please make sure you know your rights and the Complaints and Appeal process.
• Please make sure you discuss any special needs or reasonable adjustments to be considered during the assessment (refer to the Reasonable Adjustments Strategy Matrix and negotiate these with your trainer/assessor).
• Please make sure that you have access to a computer and the internet (if you prefer to type the answers).
• Please ensure that you have all the required resources needed to complete this Unit Assessment Task (UAT).
• Due date of this assessment task is according to your
• In exceptional (compelling and compassionate) circumstances, an extension to submit an assessment can be granted by the trainer/assessor.
• Evidence of the compelling and compassionate circumstances must be provided together with your request for an extension to submit your assessment work.
• Request for an extension to submit your assessment work must be made before the due date of this assessment task.

Section 2: Reasonable adjustments

• Students with carer responsibilities, cultural or religious obligations, English as an additional language, disability etc. can request for reasonable adjustments.
• Please note, academic standards of the unit/course will not be lowered to accommodate the needs of any student, but there is a requirement to be flexible about the way in which it is delivered or assessed.
• The Disability Standards for Education requires institutions to take reasonable steps to enable the student with a disability to participate in education on the same basis as a student without a disability.
• Trainer/Assessor must complete the section below “Reasonable Adjustment Strategies Matrix” to ensure the explanation and correct strategy have been recorded and implemented.
• Trainer/Assessor must notify the administration/compliance and quality assurance department for any reasonable adjustments made.
• All evidence and supplementary documentation must be submitted with the assessment pack to the administration/compliance and quality assurance department.

Reasonable Adjustment Strategies Matrix (Trainer/Assessor to complete)
Category	Possible Issue	Reasonable Adjustment Strategy (select as applicable)
¨ LLN	¨ Speaking ¨ Reading ¨ Writing ¨ Confidence	¨ Verbal assessment ¨ Presentations ¨ Demonstration of a skill ¨ Use of diagrams ¨ Use of supporting documents such as wordlists
¨ Non-English Speaking Background	¨ Speaking ¨ Reading ¨ Writing ¨ Cultural background ¨ Confidence	¨ Discuss with the student and supervisor (if applicable) whether language, literacy and numeracy are likely to impact on the assessment process ¨ Use methods that do not require a higher level of language or literacy than is required to perform the job role ¨ Use short sentences that do not contain large amounts of information ¨ Clarify information by rephrasing, confirm understanding ¨ Read any printed information to the student ¨ Use graphics, pictures and colour coding instead of, or to support, text ¨ Offer to write down, or have someone else write, oral responses given by the student ¨ Ensure that the time available to complete the assessment, while meeting enterprise requirements, takes account of the student’s needs
¨ Indigenous	¨ Knowledge and understanding ¨ Flexibility ¨ Services ¨ Inappropriate training and assessment	¨ Culturally appropriate training ¨ Explore understanding of concepts and practical application through oral assessment ¨ Flexible delivery ¨ Using group rather than individual assessments ¨ Assessment through completion of practical tasks in the field after demonstration of skills and knowledge.
¨ Age	¨ Educational background ¨ Limited study skills	¨ Make sure font size is not too small ¨ Trainer/Assessor should refer to the student’s experience ¨ Ensure that the time available to complete the assessment takes account of the student’s needs ¨ Provision of information or course materials in accessible format. ¨ Changes in teaching practices, e.g. wearing an FM microphone to enable a student to hear lectures ¨ Supply of specialised equipment or services, e.g. a note-taker for a student who cannot write ¨ Changes in lecture schedules and arrangements, e.g. relocating classes to an accessible venue ¨ Changes to course design, e.g. substituting an assessment task ¨ Modifications to physical environment, e.g. installing lever taps, building ramps, installing a lift
¨ Educational background	¨ Reading ¨ Writing ¨ Numeracy ¨ Limited study skills and/or learning strategies	¨ Discuss with the Student previous learning experience ¨ Ensure learning and assessment methods meet the student’s individual need
¨ Disability	¨ Speaking ¨ Reading ¨ Writing ¨ Numeracy ¨ Limited study skills and/or learning strategies	¨ Identify the issues ¨ Create a climate of support ¨ Ensure access to support that the student has agreed to ¨ Appropriately structure the assessment ¨ provision of information or course materials in accessible format, e.g.  a text book in braille ¨ Changes in teaching practices, e.g. wearing an FM microphone to enable a student to hear lectures ¨ Supply of specialised equipment or services, e.g. a note taker for a student who cannot write ¨ Changes in lecture schedules and arrangements, e.g. relocating classes to an accessible venue ¨ Changes to course design, e.g. substituting an assessment task ¨ Modifications to physical environment, e.g. installing lever taps, building ramps, installing a lift

Unit Assessment Task (UAT)

Assessment Task 2 – Unit Project (UP)

Assessment type:

• Unit Project (UP) - Develop an e-commerce website

Assessment task description:    

• This is the second (2) assessment task you have to successfully complete to be deemed competent in this unit of competency.
• This assessment task requires you to complete a project.
• You are required to perform the following activities in this assessment task:

• Task 1: Develop layout
• Task 2: Develop web pages
• Task 3: Validate CSS
• Task 4: Cross-browser test website
• Task 5: Validate accessibility

• You will receive your feedback within two weeks - you will be notified by your trainer/assessor when results are available.
• You must attempt all activities of the project for your trainer/assessor to assess your competency in this assessment task.

Applicable conditions:  

• This project is untimed and are conducted as open book tests (this means you are able to refer to your textbook).
• You must read and respond to all criteria of the project.
• You may handwrite/use computers to answer the criteria of the project.
• You must complete the task independently.
• No marks or grades are allocated for this assessment task. The outcome of the task will be Satisfactory or Not Satisfactory.
• As you complete this assessment task you are predominately demonstrating your practical skills, techniques and knowledge to your trainer/assessor.
• The trainer/assessor may ask you relevant questions on this assessment task to ensure that this is your own work.

Resubmissions and reattempts:               

• Where a student’s answers are deemed not satisfactory after the first attempt, a resubmission attempt will be allowed.
• You must speak to your Trainer/Assessor if you have any difficulty in completing this task and require reasonable adjustments (e.g. can be given as an oral assessment).
• For more information, please refer to your RTO Student Handbook.

Location:

• This assessment task may be completed in an independent learning environment or learning management system.
• Your trainer/assessor will provide you further information regarding the location of completing this assessment task.

General Instructions for attempting the project:

• You will develop an e-commerce website, using a range of features from various, appropriate language in this assessment task.
• You will be expanding the knowledge and skills acquired during the previous assessment task.
• Instructions to develop an e-commerce website, using a range of features from various, appropriate language is provided within the assessment task.
• You will be required to correctly attempt all activities of this assessment task.

How your trainer/assessor will assess your work?

• This assessment task requires the student to successfully complete and submit a project.
• Answers must demonstrate the student’s understanding and skills of the unit.
• You will be assessed according to the provided performance checklist/ performance criteria.
• Assessment objectives/ measurable learning outcome(s) are attached as performance checklist/ performance criteria with this assessment task to ensure that you have successfully completed and submitted the assessment task.
• If all assessment tasks are deemed Satisfactory (S), then the unit outcome is Competent (C).
• If at least one of the assessment task is deemed Not Satisfactory (NS), then the unit outcome is Not Yet Competent (NYC).
• Once all assessment tasks allocated to this Unit of Competency have been undertaken, trainer/assessor will complete an Assessment plan to record the unit outcome. The outcome will be either Competent (C) or Not Yet Competent (NYC).
• The “Assessment Plan” is available with the Unit Assessment Pack (UAP) – Cover Sheet.

Purpose of the assessment task:

This assessment task is designed to evaluate your following skills and abilities:

• Skills to create a website project that contains the following HTML documents.
• Skills to create external style sheet and link this to each of the web pages.
• Skills to modify the web pages so that the main section of each page meets the requirements as specified in the design brief.
• Skills to resolve validation issues until there are no validation errors.
• Skills to validate all web page for cross-browser issues for the latest version of each of the following web browsers.
• Skills to undertake WCAG 2.0 accessibility checks on the four web pages to Level AA using an accessibility testing tool of your choice.

Assessment Task 2 - Unit Project (UP)

Instructions to complete this assessment task:

• Please write your responses in the template provided.
• You may attach a separate sheet if required.
• You must include the following particulars in the footer section of each page of the attached sheets:
  • Student ID or Student Name
  • Unit ID or Unit Code
  • Course ID or Course Code
  • Trainer and assessor name
  • Page numbers
• You must staple the loose sheets together along with the cover page.
• You must attach the loose sheets chronologically as per the page numbers.
• Correction fluid and tape are not permitted. Please do any corrections by striking through the incorrect words with one or two lines and rewriting the correct
• The premise of the project must be closely related to the previous assessment task.
• This submission must be well presented and follow the guidelines and instructions provided.
• Please follow the format as indicated in the template section below.
• One of the most important steps that you can take: proofread your
• Appropriate citations are required.
• All RTO policies are in effect, including the plagiarism policy.

Resources required to complete the assessment task:

• Computer
• Internet
• MS Word
• Printer or e-printer
• Adobe acrobat/reader
• Learning management system

Assessment task Instructions

• This assessment task requires you to develop an e-commerce website for Computer Force.
• Website must be prepared according to the layout and the specifications.
• You must document the issues in the provided template to them.
• You must assess the performance as per the performance criteria and checklist provided.

Project Task:

Introduction

This assessment task has been designed so you can complete the practical based components of the following unit of competency:

• ICTWEB505 Develop complex web page layouts

Scenario

Computer Force is a brand-new start-up company that has set up its offices in the suburb of Parramatta in western Sydney. The business operations focus within the retail electronics industry.

Computer Force sells products including complete desktop computers, laptops and tablets plus components and software for these products. Sales will be undertaken purely online through a website integrated with popular social media platforms. An app for popular mobile platforms will also be developed to compliment the e-commerce website, once the e-commerce website has been released. The business has no plans to open a physical store front at this point of time.

The company’s premises were originally built in the early 1960’s with a brick exterior and a tin roof. All lighting is currently provided by incandescent lightbulbs. Heating and cooling are provided by a very old ducted system.

The layout of the premises includes a mix of offices where staff can undertake their work duties and a warehouse with a loading dock where products are delivered, stored and then packed for delivery when they are purchased. A reception area, two conference rooms, as well as kitchen and bathroom facilities round out the layout of the premises.

A floor plan of the premises is shown in the following figure:

Figure 1: Computer Force floor plan

The company currently has 22 full-time employees and you work in the Web Developer role for the company. You will report directly to the IT Manager, Olivia Streets. An organisational chart of the company’s employees and their reporting lines is shown in the following figure:

Figure 2: Computer Force Organisational Chart

The business recently implemented some WHS and sustainability policies and procedures, but it has no other policies, procedures or other business documentation such as style guides in place except for a business plan which is shown below:

Business Plan Mission: to provide Australia with quality brand-name products and technical solutions, combined with reliable support, and unparalleled customer service. To undertake this mission by embracing sound, sustainable and ethical business practices. Vision: to become Australia’s largest technical hardware and software provider. Business objectives The objectives for Computer Force are outlined below: ·                To become Australia’s most well-known and respected hardware and software provider. ·                To create a service-based organisation whose goal is to exceed customer's expectations. ·                To provide a smooth, efficient, and transparent sales process. The organisation has three main business processes: ·                Ordering, receiving and storing stock. ·                Receiving orders that are packed and the sent to customers. ·                Standard business              operations          in            relation to            sales,     human   resources, management, and administration. Product categories for sale include: ·                Audio ·                Computers ·                Graphics cards ·                Keyboard and mice ·                Laptops ·                Monitors ·                Networking ·                Peripherals ·                Printing & scanning ·                Software ·                Storage ·                Tablets

You have been tasked by your manager, Olivia Streets to develop an e-commerce website for Computer Force so they can sell and market their products using the following design brief.

Design brief

The website is to include the following web pages:

• Home
• Products
• Register
• About

Layout

For each web page the following layout should be used:

Only the content in the main section should be updated for each web page. The content in the other sections including the header, menu, aside and footer sections should remain the same, no matter what web page the user is currently on.

The main section should take up to 80% of the available width, while the aside section should take up the remaining 20% of the available width. You should use CSS to achieve this layout, and its needs to be responsive to different screen sizes. It is recommended that you use the CSS Grid and/or CSS flexible box to achieve the responsive layout. You should also link the CSS file externally from the HTML documents.

The following are requirements for sections within the layout:

• The Header section is to contain only the Computer Force logo centrally positioned.
• The Menu section is to contain links to each of the web pages within the website which is left aligned.
• The Menu section should contain a search area which is right aligned. This area should contain a text box that the user can enter text for the search term, and a button with the text of “Search”.
• The Aside area should contain an h2 heading with the text of “Purchases”. Under

this it should contain a small table with the following cells:

• Row 1 column 1: Text of “0 items”
• Row 1 column 2: Text of “Cart sub-total: $0”
• Row 2 column 1 and 2: Button with the text “Go to Checkout”.

• The Footer section should contain a paragraph element of text containing copyright information. You should specify the copyright symbol followed by the current year and your name within the paragraph.

Colour and font scheme

The website elements should contain a colour scheme for every element within the website, barring text that appears in paragraphs. Your colour scheme should consider the colours used in the Computer Force logo and should be aesthetically pleasing. Elements such as headings, buttons, links, etc. should have a style applied to them specifying the colours (both foreground and background) as well as the fonts that should be applied to those elements.

Page requirements

The following specifies the requirements for the main section for each of the web pages.

Home page

The requirements for this page are:

• Must have an h1 element to specify the text “Welcome to Computer Force”.
• Must contain the following text directly below the header: “Computer Force is your online expert in all things computing”
• Must contain the following below the previous text. An h2 and img elements for some of the main products that Computer Force sells:
  • Computers
  • Laptops
  • Monitors
  • Printing & scanning
  • Software
  • Tablets

Each should have a title specified by the h2 element, and an image that is appropriate to the product type. You should source relevant creative commons images for each of the products.

• Each of the above images should act as a hyperlink to an anchor for that product category on the Products page.

Products page

The requirements for this page are:

• Must have an h1 element to specify the text “Products we sell”.
• Contain the following text directly below the header: “Computer Force sells products in the following categories:”
• Below this should be an h2 and img elements for every product category that Computer Force sells including:
  • Audio
  • Computers
  • Graphics cards
  • Keyboard and mice
  • Laptops
  • Monitors
  • Networking
  • Peripherals
  • Printing & scanning
  • Software
  • Storage
  • Tablets

Like the home page, each should have a title specified by the h2 element, and an image that is appropriate to the product type. You should source relevant creative commons images for each of the products.

Register page

The requirements for this page are:

• Must have an h1 element to specify the text “Registration Form”.
• Contain the following text directly below the header: “Please complete the following form to register for an account on our website.”
• The form should implement a post submission and is to contain the following elements:

Name	Notes
Username*	Used to gather a unique account name.
Email Address*	Used to gather the users email address.
Password*	Used to set the accounts password.
Confirm Password*	Used to confirm the account password.
First Name*	Used to set the users first name.
Surname*	Used to set the users surname.
Gender*	Used to specify whether the user is male or female.
Date of Birth	Used to set the users date of birth.
Address*	Used to set the street address where the user lives.
Suburb*	Used to set the suburb where the user lives.
Postcode*	Used to set the postcode where the user lives.
State*	Used to set the state where the user lives. Must give the user the option one from the following states: ACT, NSW, NT, QLD, SA, TAS, VIC and WA.
Phone number	Used to set the user phone number.
Clear	Used to clear the form data.
Register	Used to submit the form data.

• Fields that have an asterisk next to their name in the previous table are required fields where the user must supply some value.

About page

The requirements for this page are:

• Must have an h1 element to specify the text “About Computer Force”.
• Must contain the following text directly below the header:
  • Computer Force is a brand-new start-up company designed to provide first- class service to its customers. Based in Parramatta in Sydney, Computer Force provides top class computing products at bargain prices, for sale throughout Australia.

Our goals are:

• To become Australia’s most well-known and respected hardware and software provider
• To create a service-based organisation whose goal is to exceed customer's expectations
• To provide a smooth, efficient, and transparent sales process

• Must contain the following text directly below the previous text:
  • You can contact us using the following methods:
    • Address: 100 Main Road, Parramatta, NSW 20150
    • Email: info@computerforce.com.au
    • Phone: 02 4444 5555

Tasks

Task 1: Develop layout

Using a development tool of your choice, create a website project that contains the following HTML documents:

• Home
• Products
• Register
• About

Create an external style sheet and link this to each of the web pages.

Once this has been completed, create the layout that is to be applied to each of the web pages including the header, menu, aside, and footer sections as specified in the design brief.

Once you have completed this task, you should copy the HTML mark-up for each of the web pages, and the external CSS code to a word processor document called “XXX_ ICTWEB505_Task1.docx” where XXX is your student id and submit this as evidence that you have meet the requirements of this task.

Suggested evidence:

The student must correctly complete all the following requirements to be adjudged competent for this task.

Element	Implemented Correctly
Have created four HTML documents titled: Home, Products, Register and About	
Created an external CSS style sheet and linked it to the four HTML documents	
Created a web page layout that specifies a header, menu, main, aside and footer sections	
Ensure that the main section takes up 80% of the screen width, and the aside section takes up 20% of the screen width.	
The layout should be responsive to different viewport sizes	
The Header section is to contain only the Computer Force logo centrally positioned.	
The Menu section is to contain links to each of the web pages within the website which is left aligned.	
The Menu section should contain a search area which is right aligned. This area should contain a text box that the user can enter text for the search term, and a button with the text of “Search”.	
The Aside area should contain an h2 heading with the text of “Purchases”. Under this it should contain a small table with the following cells: ·         Row 1 column 1: Text of “0 items” ·         Row 1 column 2: Text of “Cart sub-total: $0” Row 2 column 1 and 2: Button with the text “Go to Checkout”.	
The Footer section should contain a paragraph element of text containing copyright information. You should specify the copyright symbol followed by the current year and your name within the paragraph.	

Task 2: Develop web pages

Using a development tool of your choice, modify the following web pages so that the main section of each page meets the requirements as specified in the design brief:

• Home
• Products
• Register
• About

You should ensure that any remaining colour and font styling not developed in the previous task are completed in this task.

Once you have completed this task, you should copy the HTML markup for each of the web pages, and the external CSS code to a word processor document called “XXX_ ICTWEB505_Task2.docx” where XXX is your student id and submit this as evidence that you have meet the requirements of this task.

Suggested evidence:

The student must correctly complete all the following requirements to be adjudged competent for this task.

Element	Implemented Correctly
The Home page: ·           Must have an h1 element to specify the text “Welcome to Computer Force”. ·           Must contain the following text directly below the header: “Computer Force is your online expert in all things computing” ·           Must contain the following below the previous text. An h2 and img elements for some of the main products that Computer Force sells: o      Computers o      Laptops o      Monitors o      Printing & scanning o      Software o      Tablets Each should have a title specified by the h2 element, and an image that is appropriate to the product type. ·           Each of the above images should act as a hyperlink to an anchor for that product category on the Products page.	
The Products page: ·           Must have an h1 element to specify the text “Products we sell”. ·           Contain   the   following   text   directly   below   the   header: “Computer Force sells products in the following categories:” ·           Below this should be an h2 and img elements for every product category that Computer Force sells including: o      Audio o      Computers o      Graphics cards o      Keyboard and mice o      Laptops o      Monitors o      Networking o      Peripherals o      Printing & scanning o      Software o      Storage o      Tablets Like the home page, each should have a title specified by the h2 element, and an image that is appropriate to the product type.	
The Register page: ·           Must have an h1 element to specify the text “Registration Form”. ·           Contain the following text directly below the header: “Please complete the following form to register for an account on our website.” ·           The form should implement a post submission and is to contain the following elements: Name Notes Username* Used to gather a unique account name. Email Address* Used to gather the users email address. Password* Used to set the accounts password. Confirm Password* Used to confirm the account password. First Name* Used to set the users first name. Surname* Used to set the users surname. Gender* Used to specify whether the user is male or female. Date of Birth Used to set the users date of birth. Address* Used to set the street address where the user lives. Suburb* Used to set the suburb where the user lives. Postcode* Used to set the postcode where the user lives. State* Used to set the state where the user lives. Must give the user the option one from the following states: ACT, NSW, NT, QLD, SA, TAS, VIC and WA. Phone number Used to set the user phone number. Clear Used to clear the form data. Register Used to submit the form data.	
The Contact page: ·           Must have an h1 element to specify the text “About Computer Force”. ·           Must contain the following text directly below the header: o      Computer Force is a brand-new start-up company designed to provide first-class service to its customers. Based in Parramatta in Sydney, Computer Force provides top class computing products at bargain prices, for sale throughout Australia. Our goals are: o    To become Australia’s most well-known and respected hardware and software provider o    To create a service-based organisation whose goal is to exceed customer's expectations o    To provide a smooth, efficient, and transparent sales process ·           Must contain the following text directly below the previous text: o      You can contact us using the following methods: o    Address: 100 Main Road, Parramatta, NSW 20150 o    Email: info@computerforce.com.au o           Phone: 02 4444 5555	
The CSS file should apply colours and fonts to give the website an aesthetic appeal.	

Task 3: Validate CSS

Use the W3C CSS Validation Service located at https://jigsaw.w3.org/css-validator/ to validate the CSS file for the website. If any validation errors occur, you need to resolve these issues until there are no validation errors.

You should save a screenshot of the validator output report to a word document titled “XXX_ICTWEB505_Task3.docx” where XXX is your student id, and submit this as evidence that you have meet the requirements of this task.

Suggested evidence:

The student must correctly complete all the following requirements to be adjudged competent for this task.

Element	Implemented Correctly
The CSS has successfully been validated using the W3C validation service.	

Task 4: Cross-browser test website

Use the BrowserStack cross-browser validation tool located at https://www.browserstack.com to validate all web page for cross-browser issues for the latest version of each of the following web browsers:

• Chrome
• Firefox
• Microsoft Edge

If any issues are identified in any of the web pages you need to document each issue using the following template in a word processor.

Web page where error occurred

Figure 4: Cross-browser issues template

Each issue should be given a unique identifier number so it can be identified easily. The web browser name/version plus details of the issue should be recorded. You should capture a screenshot of each issue which should be saved as the issue number and annotate where the problem is located.

You are required to copy a screenshot of each of the four web pages for each of the three web browsers (12 screenshots in total) to a word document with the title of “XXX_ICTWEB505_Task4” where XXX is your student id. Furthermore, if any issues are identified then you should capture a corresponding annotated screenshot of the issue and place this is the XXX_ICTWEB505_Task4. Then you should submit the XXX_ICTWEB505_Task4 document as evidence that you have meet the requirements of this task.

Suggested evidence:

The student must correctly complete all the following requirements to be adjudged competent for this task.

Element	Implemented Correctly
Screenshots of the four web pages being viewed by the following web browsers in BrowserStack: ·         Chrome ·         Firefox ·         Microsoft Edge	
The students are not expected to fix any issues, but they should have used the given document to highlight any issues and provided an annotated screenshot of each issue.	

Task 5: Validate accessibility

In this task you are to undertake WCAG 2.0 accessibility checks on each of the four web pages to Level AA using an accessibility testing tool of your choice.

For each web page, you must undertake an accessibility test, and then resolve any identified accessibility issues, until there are no web accessibility issues for that web page.

You are required to copy a screenshot of the web accessibility report outcomes for each of the four web pages. The screenshot should clearly show the web page and the results. These screenshots should be copied to a word document with the title of “XXX_ICTWEB505_Task5” where XXX is your student id. Once you have completed this task you should submit this as evidence that you have meet the requirements of this task.

Suggested evidence:

The student must correctly complete all the following requirements to be adjudged competent for this task.

Element	Implemented Correctly
The HTML for the four web pages has successfully been validated to WCAG 2.0 Level AA	