fix html and css and redesign layout

Changelog

Version 1.0: Initial specification (19 Mar 2020), Raghav Sampangi.
Version 1.1: Update (26 Mar 2020), Raghav — added clarification Re: Wireframe in Step 2
Version 1.2: Update (30 Mar 2020), Raghav — updated folder structure to include A4-Wireframes.PDF
Version 1.3: Update (06 Apr 2020), Raghav — updated the description to include marking scheme.

~~~

Purpose

The purpose of this assignment is for you to understand how to fix errors in a codebase that you inherit and style the web page to meet requirements.
The purpose of this assignment is to assess your understanding and to help you revise your knowledge of developing responsive websites using HTML and CSS. The exercise will require you to create responsive and standards-compliant websites, using the website that is provided.

When is the assignment due?

Sunday, 19 April 2020 (11:30pm)
(submit in the submission drop box below this set of instructions)
Start your assignment submission at 11:00pm to give yourself plenty of time — if you start your submission at 11:29pm, it may not complete before 11:30pm and Brightspace will disable submissions precisely at the deadline.
Late submissions and email submissions WILL NOT BE ACCEPTED.

Can we work on this assignment individually or in groups?

Individually. You are expected to complete all tasks individually and submit it yourself.
Dalhousie’s academic integrity rules apply.

What do I do if I have any questions about the assignment?

Your first point of contact is your course instructor(s).
If you need any help on some concepts, you may also consider using the Learning Centre and Lab/Tutorial hours offered by your course TAs (schedule available on Brightspace).

Expectations, in detail:

STEP 1: Download the assignment folder (a4.zip) — (25 marks)

This folder has two folders named www and W3Cvalidation, and a file named README.md
Find and fix all errors in the HTML and CSS.
- Errors could include element/property errors.
- Focus on errors especially ones such as:
  - incorrect folder or file names or file paths,
  - scrolly things or blinky things (which are not recommended by the W3C and are terrible to include on websites),
  - use of frames (you could use an iFrame if needed), and,
  - the use of tables for layouts (this is also a big no no) 🙂
DO NOT create new files. Use the same files and fix errors in them.
If required, you may replace some of the elements with semantic HTML5 elements, i.e. <header>, <nav>, <main>, <articles>, <section>, <aside> and <footer>, wherever you feel such a replacement is required. Do not use <div> for everything.
Use the HTML and CSS files with all errors fixed to continue with the next task.
Marking:
- All errors fixed — (16 marks)
  - If the instructions say something is bad, e.g. the use of tables for layouts is a big no no, it is safe to assume that you are expected to change this behaviour. So for example, remove the HTML tables used for layouts and replace them with other container elements that are suitably styled.
  - If scrolly and blinky things are bad, retain the content, but get rid of the scrolly and blinky behaviours.
- <div> not used for everything — (3 marks)
- Semantic HTML elements used where applicable to organize content — (3 marks)
- IDs used at least for container and layout elements — (3 marks)

STEP 2: Re-design these web pages: (20 marks)

Re-design these web pages as follows:
- All web pages must have a consistent appearance.
- You must create a desktop AND mobile layout.
- If you want to change colour schemes, go for it.
- Remember that the homepage design may be different from the other pages.
- Visualize the layouts using wireframes (submit a single wireframe file — A4-Wireframes.PDF — that include all the wireframes).
  - Draw/illustrate these wireframes yourself — DO NOT use wirify to generate the wireframes. Wireframes are used to guide your web page development not to show the structure after the page is developed.
  - If you submit Wirify-generated wireframes, you will lose all points associated with wireframes (you will get 0 marks for wireframes if you do so).
Summarize any assumptions and design decisions that you make to develop the web page in README.md
- In this file, write any assumptions that you need to make to style the web page.
Marking:
- Wireframes — (15 marks = 2 views x 2.5 marks each x 3 web pages)
  - (2 views for each page – mobile and desktop/laptop).
  - You MUST design a different view for each device.
  - You MAY NOT assume that the two views are the same.
- Design decisions and summary of assumptions in README.md — (5 marks)

STEP 3: Layout styling for your web pages: (45 marks)

You must use:
- Normalize.css for CSS resets (include citation in both your HTML and README.md).
- Flexbox or Grids to make your layouts.
- CSS @media queries to implement responsive behaviour (i.e. transition from desktop to mobile view and vice-versa).
- For mobile layouts, assume that:
  - The mobile layout transitions occur at a width of 800px.
  - Containers occupy 100% of the viewport width in the mobile view.
All styles (both desktop and mobile) must be in style.css
- DO NOT create any additional stylesheets.
Marking:
- CSS resets used. (3 marks)
- ALL styles (including desktop and responsive with @media) are included in style.css (5 marks)
- Layouts are clean and well organized (5 marks)
- The layout design developed in the wireframes are properly implemented (4 marks)
- Contrast principle followed in using colour schemes for re-designing (3 marks)
- Repetition of styles followed to implement consistency in styles used across the three pages of the website (3 marks)
- Alignment of all elements on each web page is with respect to something else on the page. No element is randomly placed on the page. (3 marks)
- Proximity principle followed to place related elements close to each other. (3 marks)
- CSS Grids or Flexbox used to organize content into layouts (3 marks)
- Mobile behaviour —
  - Transitions occur at 800px (3 marks)
  - Containers occupy 100% of the viewport width in mobile view (10 marks)

STEP 4: Validate your web page and stylesheet: (10 marks)

Validate HTML markup using the W3C HTML validator: https://validator.w3.org/nu/
- Use this service to fix any errors that you may have.
- Save the reports from the validator as PDF — W3C-index.pdf, W3C-about.pdf, W3C-contact.pdf
  - Marking — 2 marks for each page validation (6 marks)
- Note — the validator does not give you the option to download the report as PDF. You will need to use the “Print as PDF” option available in web browsers.
Validate CSS using the W3C CSS validator: https://jigsaw.w3.org/css-validator/#validate_by_input
- Save the report from the validator as PDF — W3C-styles.pdf
  - Marking — 4 marks for style validation.

STEP 5: What (and where) do I submit?

A single ZIP file named LASTNAME_FIRSTNAME_B00XXXXXX_A4.zip
- Replace “LASTNAME”, “FIRSTNAME” and “B00XXXXXX” with your last name, first name and B00 number.
- RAR or 7Z or folders compressed using other formats are not acceptable. Your assignment will not be graded and you will get zero (0) marks if you submit using formats other than ZIP.
Submit the single ZIP file in the assignment submission module below these instructions.
The above ZIP file should contain a folder named a4 that should have the folder structure specified in the image below (also included as a separate file below, in case the image does not load), with files/documents in the specified file formats. Failure to follow specified formats will lead to a 10 mark penalty on the assignment:

|—- README.md
|—- A4-Wireframes.pdf
|
|—- W3Cvalidation

| |—- Include all HTML and CSS validation files here

|—- www

STEP 6: Marking and rubric

The rubric will be posted in this space later shortly.

fix html and css and redesign layout

DISCLAIMER

QUICK LINKS

WE ACCEPT

CONTACT US

Email: support@academicpapers.net