Illustration by: Michael Coghlan CSCI 1170: ASSIGNMENT 3 Due date: November 02, 11:30pm Halifax time Note: This is an individual assignment. Please read the instructions & expectations carefully....

Illustration by: Michael Coghlan
CSCI 1170: ASSIGNMENT 3 Due date: November 02, 11:30pm Halifax time
Note: This is an individual assignment. Please read the instructions & expectations carefully.
https:
www.flickr.com/photos/mikecogh
1. Expectations and TA roles
2. A3 requirements
3. Information for clarification
4. Submission requirements
5. Grading (details to follow separately)
THIS DOCUMENT CONTAINS THE FOLLOWING DETAILS
FOR ASSIGNMENT 3 IN THIS COURSE:
1. Expectations and TA roles
EXPECTATIONS: WHAT’S OKAY & WHAT’S NOT (PAGE 1)
This is an individual assignment.
­ Work on it by yourself.
­ Help each other in the class and/or in your
groups – do not share solutions.
­ Restrict your help to conceptual discussions
only.
­ If you receive help, include a citation in your
code AND in readme.md in your submission
folder with the following information:
­ Help received from: person, URL of website,
etc.
­ Date help received: DD-MMM-YYYY
­ Nature of help received: one-two line
description of the nature of the help received.
Give credit where credit is due.
This assignment tests your individual
learning.
­ It will be tested for plagiarism, inappropriate
collaboration and violation of academic
integrity principles.
Start your work early and budget your time.
­ It helps you work on your assignments in a
healthy manner.
If you have any questions or concerns, please
email both XXXXXXXXXX and
XXXXXXXXXX – at least 48 hours
BEFORE the deadline
4
mailto: XXXXXXXXXX
mailto: XXXXXXXXXX
EXPECTATIONS: WHAT’S OKAY & WHAT’S NOT (PAGE 2)
How can your TAs help?
­ Remember, this is an assignment.
­ We are assessing how you can apply what you have learned in the context that is given in the
assignment.
­ Your TAs can guide you in your work, but…
­ They will not give you the answer.
­ They will not be able to review your work and tell you whether it is co
ect or not.
­ They will not be able to review your work in the last minute, i.e., a few minutes or hours before
the deadline – remember that they are students taking courses too.
­ They cannot give you extensions – if you want an extension for any reason, you will need to
contact both Raghav ( XXXXXXXXXX) and Ga
iella ( XXXXXXXXXX).
5
mailto: XXXXXXXXXX
mailto: XXXXXXXXXX
2. A3 requirements
GOALS OF ASSIGNMENT 3 (A3)
This assignment tests your knowledge in the aspects discussed in the course.
­ Designing web layouts using wireframes
­ Styling web pages and adding layout styles using CSS
­ Ensuring separation of concerns between content and presentation layers in web pages, i.e.,
maintaining separate HTML and CSS files
7
OVERVIEW OF A3
This assignment requires you to use the assignment code that you submitted for
Assignment 1 as a starting point, with specific requirements that are identified in this
document (see note #2).
Note:
1. Read this document fully first. There are three main tasks in this project.
2. If you had a lot of e
ors or were unable to submit assignment 1, please contact Raghav (via
XXXXXXXXXX) for a different starting code for Assignment 3.
­ Note that the starting code will be available with Raghav on October 23.
­ Note: this assignment must be submitted on Brightspace in ZIP format.
8
mailto: XXXXXXXXXX
A3: DETAILED REQUIREMENTS (PAGE 1)
Task 0: Preparing A1 code for A3
­ Create a new folder named A3
­ Copy all your code that you submitted for A1 in this A3 folder, it should have the folder structure that is
identified in the A1 document as a starting point.
­ Create the following new folders in this A3 folder:
­ design
­ To hold the wireframe file (wireframe.pdf) and colour scheme file (colour-scheme.pdf)
­ validation
­ To hold all validation files for HTML and CSS validation
(to be named W3C-html-validation.pdf and W3C-css-validation.pdf)
­ css
­ Create a file named main.css inside this folder to hold all style information for this assignment, with
appropriate comments highlighting groups of the style information used. Also include normalize.css 9
A3: DETAILED REQUIREMENTS (PAGE 2)
Task 1: Design
­ Think about the design of your website from A1. How do you want the information on your website to
e presented? How should the layout be? What should be the appearance of this website? What
colours do you want to use for the header, text, footer, sections of content, etc.? Think about all these
aspects and then do the following:
1. Develop a wireframe for the layout you have conceptualized.
­ Create the wireframe for desktop view only. For now, this website does not have to be responsive.
­ You may draw your wireframes on paper or may use one of the tools to generate wireframes. If you use tools
to generate wireframes, cite the tool in readme.md
­ Save your wireframe in a file named wireframe.pdf
­ Wireframes must be neat and legible. Wireframes that are not neat will result in a penalty of 50% of the
wireframe grade.
­ There is a reference wireframe on Brightspace that gives you information about how the wireframe must look
and how you have to annotate the wireframe with information.
10
A3: DETAILED REQUIREMENTS (PAGE 3)
Task 1: Design (Cont’d)
­ After you draw the wireframe, do the following:
2. Think about a style scheme for your website.
­ A colour scheme is expected to have the following information:
a) Colour scheme for the web page header – including background colours, text colours, any link
colours, etc.
) Colour scheme for the web page footer – including background colours, text colours, any link colours,
etc.
c) Colour scheme for the main web page content – background colours, text colours, any link colours,
etc.
d) Any other colours or style information you may use.
­ Save this information in a file named colour-scheme.pdf. You may write this in the form of a table or as
lines of text in this file. The choice is yours.
­ There is no word or page limit for this task.
11
A3: DETAILED REQUIREMENTS (PAGE 4)
Task 2: Styling your single page website
­ CSS reset
­ Create a file named normalize.css in your assignment’s css folde
­ In your HTML file (i.e., index.html), include a link to this CSS reset file, normalize.css
­ Download normalize.css as indicated in the videos on responsive design, and include a citation to this
file in both the HTML file and readme.md
­ Prepare your main style file
­ Create a file named main.css in your assignment’s css folde
­ Link to this in your HTML file below the CSS reset file.
12
A3: DETAILED REQUIREMENTS (PAGE 5)
Task 2: Styling your single page website (Cont’d)
­ Style your website
­ Code style information in main.css so that you style the website so that the content on the website is
organized as you conceptualized in your wireframe.
­ Use the colour scheme information that you developed in your website styling activity.
­ Remember:
a) You must follow principles such as contrast, repetition, alignment, proximity.
) You must follow basic principles of creating usable and aesthetically pleasing websites.
c) Therefore, choose your colour schemes and website layout design appropriately.
­ All style information for your HTML must be in main.css only – do not include any additional CSS files.
­ See important considerations in the next page…
13
A3: DETAILED REQUIREMENTS (PAGE 6)
Task 2: Styling your single page website (Cont’d)
­ Style your website: Important things to keep in mind
a) You must use CSS Flexbox for styling your layout. You may use nested flex containers, if you prefer.
) You must code your styles by yourself. Do not use any online or external code. Do not use any CSS
frameworks.
c) If you use any code from online sources, you will receive a grade of zero (0) for the portion of the code
that is copied.
14
A3: DETAILED REQUIREMENTS (PAGE 7)
Task 3: Validate your code
­ HTML validation
­ Validate your HTML (index.html) using the W3C HTML validator:
https:
validator.w3.org/#validate_by_input
­ Save the HTML validation report as W3C-html-validation.pdf in the folder named validation –
emember there’s only one HTML file, so there will be only one validation file too.
­ CSS validation
­ Validate your CSS (main.css) using the W3C CSS validator:
https:
jigsaw.w3.org/css-validato
#validate_by_input
­ Save the CSS validation report as W3C-css-validation.pdf in the folder named validation –
do not create a validation file for normalize.css – validate only main.css.
15
https:
validator.w3.org
https:
jigsaw.w3.org/css-validato
3. Information for clarification
A3: SOME GENERAL FAQ
DO NOT use any frameworks: NO CSS frameworks or Code Li
aries!
­ You are expected to implement ALL style features of this website by yourself.
­ You must not use Bootstrap or other CSS frameworks.
­ You must not use any li
aries or “embed” features on the web page. The website must be developed
using features of HTML, CSS and JS (jQuery).
You are not expected to make the website responsive:
­ The website is not expected to be responsive, yet.
­ If you want to learn implementing responsive behaviour, we will not stop you. No bonus grade will be
provided if you try to implement it.
­ If you do want to implement responsive behaviour, remember to make sure that all requirements of this
assignment are complete before you try other things.
17
A3: INFO ABOUT CHANGES
Revisions to index.html:
“I had some e
ors in my A1 code. Can I make changes to HTML?”
­ Yes, you can make revisions to index.html, if you want to.
­ If you make a change, include a section in readme.md named changelog, and include detailed
information (in 1-2 paragraphs) about what changes you made and why you made them.
18
A3: INFO ABOUT STARTER CODE
Using starter code:
“I had some e
ors in my A1 code. Can I use your starter code?”
“I want to start this assignment afresh. Can I use your starter code?”
­ Sure, the starter code will be available on Saturday, October 23
­ Email Raghav ( XXXXXXXXXX) and the code will be made available to you
­ If you use starter code, include a section in readme.md named starter code, and include a notice
that says that you used the starter code with permission as you wanted to start afresh.
19
mailto: XXXXXXXXXX
4. Submission requirements
A3: SUBMISSION (PAGE 1)
Format your submission as follows:
1. Create a folder named A3 and
copy your code from A1 to this folder named A3
2. This folder must include files and folders