Objective

Create an improved version of your professional website using CSS and HTML together.

Optionally, you may reuse code from Assignment 1 by adding CSS to your HTML if you indicate you have done so in your README.

Part 1: Code Review

Review the HTML code from your first assignment. Choose 5 pieces of code that can be

improved by using CSS. For each example, present (a) the code snippet, (b) current outcome, (c) desired outcome, and then (d) present a code snippet using both HTML and CSS that would fix    the problem and finally, (e) present the new outcome of the code. Maximum 500 words each

example (not including code snippets), include as a PDF within your zip file.

Part 1 (Alternative): Code Review

If you did not complete assignment 1, please identify that you are doing the alternative code

review within your README. Review the HTML from anywhere within dal.ca and its subdomains to find 5 pieces of code implemented in HTML that could be better improved with CSS.

Maximum 500 words each example (not including code snippets), include as a PDF within your zip file.

Part 2: CSS (26)

Create HTML or Optionally reuse the HTML from your assignment 1 and add CSS Styling to each:

-     Style three (3) web pages with colour. One webpage should use flexboxes, another grids, and lastly, the third webpage should use grid areas (9 marks)

-     Style you navigation (widget, sidebar, menu, etc.) (2 marks)

-     Style 3 images with: (3 marks)

o Border

o Padding

o Margins

-     Style your all your URLs with hover (2 marks)

-     Style your lists (unordered and ordered) (4 marks)

-     Table (2 marks)

-     Style at least 1 page with flexboxes (2 marks)

-     Style at least 1 page with grids (2 marks)

Selectors (14 marks, 2 mark each)

Use the following selectors and note their location within the README (see part 5).

o Universal selector

o Multiple selector

o Child selector

o Siblingselector

o Adjacent Siblingselector

o Attribute Selector

o Pseudo-element Selector

-

Part 3: Design Write-up

Review the C.R.A.P. and note where you have implemented these principles within your current website’s design. Include a Maximum 1000 words, submit as a PDF. Choose one other design

theory (either from class, or with citations) and explain how you used that principle to create a style identity. For example, line, movement, unity, etc.

Part 3: Accessibility

Ensure your design remains accessible with violations.  Use the inspector tool in the browser and include a ‘PDF print’ of the outcome (screenshotsavedas a PDF is also fine).

Part 5: READ ME

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).

Parameters

For full marks, your website must:

•    Be submitted properly in accordance with submission instructions

•    Be complete as specified by the objectives

•   You may only use relative links

•   You may only use HTML and CSS

Submission Instructions

Please follow these instructions to get full marks. The submission will be marked in accordance with 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 A2_StudentNetID.zip (e.g., A2_w2n00.zip) (do not include @dal.ca)