Objective

Create an improved version of your professional website using HTML, CSS, JS (EMCS v6 only, all code must be compatible with browsers: Apple iOS, Mozilla Firefox, and Google Chrome) and

everything else you learnt in this course. Optionally, you may reuse code from Assignment 1 and 2, if you indicate your have done so in your README.

Part 1: Design Desktop, Mobile, & Tablets [10 marks]

Present a design for your website in desktop, mobile, and tablets using all you have learnt about design in the course. Your website should dynamically serve in 3 forms: mobile, web, and tablet. The website should size dynamically when the window size is changed.

Part 2: JS [40 marks]

Implement the following JS features. Each implementation should be separate:

•    [1 mark]  Notifications: Use at least one notification

•    [4 marks] Event Handler: Use an event handler to respond to user any interaction (Should be different than implemented notification).

•    [5 marks] Conditional: Create one website feature that uses a conditional (nested if, ifelse, and else OR switch case)

•    [10 marks] Colour Changer: create a set of 2 buttons that when clicked changes CSS

elements of the webpage to give you three different colour schemes. All colour schemes should follow a design colour pallet, be legible, and accessible in all colour forms.

The 10 marks allotted here are for the code. If your website becomes inaccessible because of these colour changes, you lose the marks in Part 4.

•    [20 marks] Form: Create a form that has at least 5 required questions and a submit

button. Use at least three types of input, and a textarea. All input should be checked with conditionals and at least one pattern is used to validate the input.

Part 3: Accessibility [10 marks]

Review the international accessibility guidelines and teachings from class to ensure your website it accessible. Refer to the syllabus for more details on marking. Use the developer tools in your browser to complete an accessibility check and include a screenshot of the report.

Must be accessible for all colour changer choices, see note above.

Part 4: Reflection [5 marks]

Reflect on the website you made. How does it compare to your expectations in A1? Will you be able to use it for the purpose you outlined now that class is finished? 100 – 1 000 words. This is a completion mark, please feel free to write honestly and give feedback about the assignment.

Part 5: READ ME [9 marks]

In a README file which explains the structure of your code including all relative paths in a text file: README.txt Here is where you will document your code. For each function, include a purpose, and as applicable: input and output, example, dependent code structures.

•    Include any references to materials used (e.g., photos or stock images) using full ACM reference format

•    Include an asset list that details the assets included in your folder.

•    Include a file structure

•    Indicate if you have reused code from A1 or A2

•    Follow syllabus instructions for use of AI/LLMs/ChatGTP/etc.

Bonus:  Free Hosting [15 marks]

Put your portfolio online! Use Free hosting platform of your choice to host your webpage. Suggested: github pages <link:https://pages.github.com/>

Submission

Parameters

For full marks, your website must:

•    Be submitted properly in accordance to submission instructions (i.e. zipfolder)

•    Be complete as specified by the objectives

•   You may only use relative links

•   You must use JS EMCS v6

•    Results must be compatible with browsers: Apple iOS, Google Chrome, Mozilla Firefox

•   You may use anything you have learnt in CSCI1170

Submission Instructions

Please follow these instructions to get full marks. The submission will be marked in accordance to what the file opens, so if the file fails to render a webpage, your project is incomplete.

-     Submit by the deadline specified by the course plan

-     All policy (lates, SDAs, etc.) outlined in syllabus

-     Submit on Brightspace:

o Use the Brightspace submission box

o Zip your project folder (only .zip files will be accepted)

. Submit a zip of your folder that includes all your work.  Doing this preserves the structure of the relative paths. The zip should include all the parts of your assignment including the requested PDFs alongside the html, assets (videos, pictures, etc.)

o All assets (pictures, video, code, etc.) must be included

-     Your project must work and contain no viruses or malicious code

-     Following Naming of A#_StudentNetID.zip (e.g., A3_w2n00.zip) (do not include @dal.ca)