Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
106 views

2022 TRIMESTER 2 COSC260 - Assignment 1 - Programming Task 1 (HTML & CSS)

This document provides instructions for Assignment 1 of the COSC260 Web Programming course. Students are asked to create an online dating profile for a fictional geek using HTML and CSS. The profile must have a two-column layout on desktop that collapses to one column on mobile. Students will be graded on their page layout, HTML/HTML5 usage, CSS code, coding style, and content. The assignment is due by July 24th, 2022.

Uploaded by

Hamza Shah
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
106 views

2022 TRIMESTER 2 COSC260 - Assignment 1 - Programming Task 1 (HTML & CSS)

This document provides instructions for Assignment 1 of the COSC260 Web Programming course. Students are asked to create an online dating profile for a fictional geek using HTML and CSS. The profile must have a two-column layout on desktop that collapses to one column on mobile. Students will be graded on their page layout, HTML/HTML5 usage, CSS code, coding style, and content. The assignment is due by July 24th, 2022.

Uploaded by

Hamza Shah
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

TRIMESTER 2 2022 COSC260 Web Programming

Assignment 1 - Programming Task 1 (HTML & CSS)

Must Complete: Yes 

Weight: 10% 

Assessment Notes: Programming task. 

All assessment tasks must be attempted. 

This assessment relates to: 

Learning Outcomes 2 3 

Task 
The Greek Geek has noticed that a lot of the great programmers from COSC120 have joined Dr Walter Shepman in COSC260, and he
now wants a web presence for his SeekAGeek geek dating app. Your task is to create an online geek dating profile for one geek. Make
up personal information, e.g. Walter Shepman, shepman@geekmail.com 0412345678, etc. You may use geek data from the allGeeks.txt
file provided, or make up your own geek!

Instructions 
Your assignment must have the following directory structure: 

cosc260_a1

|-- index.html

|-- css

|-- reset.css

|-- style.css

|-- img

|-- geek.png

File Restrictions 

Additional CSS and HTML files will be allowed, but this structure is required as a bare minimum. 

All additional CSS files must be located in the css directory. 

All additional image files must be located in the img directory. 

Code Restrictions 

You may only use HTML5 and CSS3. This means, for example: 

you cannot use JavaScript; 
you cannot use CSS frameworks or pre-processors such as LESS and SASS; 
you cannot use Flash or other content that requires plugins or browser extensions. 
If you use flexboxes, or the flex value, you must provide a fallback method (i.e. using techniques shown in class).

Your code should be well presented, this means that: 

your code is indented properly; 


your code is appropriately commented; 
all of your CSS must be in an external file, no internal or inline styles 
you must use the reset.css provided.
correct semantic use of HTML tags 

Design 

On a desktop computer your profile must have a two-column layout but collapse to a one-column layout when displayed on small
screens such as mobile phones. 

Columns 
For widths smaller than 600px: Single column 
For widths larger than 600px : Two-column 
You must use floating elements rather than static or absolute positioning. 
Use <div> elements and CSS to structure the layout of your page. 
Do not use tables for layout
Your design and layout should be both functional and visually attractive

Page Contents

Left Column: 
Name 
Profile image 
Contact details (email and phone)
Right Column: 
Short description (i.e. "What makes you a geek?") 
Favourite geek hobbies
Favourite tv shows and/or games
These details are the minimum requirements. You may add extra sections as you see fit. 
In creating your geek profile, be as creative and outlandish as you want!

Mandatory HTML

<head> containing appropriate meta data


Minimum: title, description, keywords, author
<div> elements for structure (or HTML5 elements)
A list element with items: you must choose the most appropriate type  
Heading 1-6 elements (i.e. any heading elements) used in semantically correct manner
Paragraph element
Image element
Link element
Links to content within your page should be relative, but links to outside content should be absolute
‘Strong’ tag

Mandatory CSS

The following CSS selector types:


Individual
Class
Type
Pseudo-class
Hover effect for links: the nature of the effect is up to you
Appropriate font stack
Float set for at least 1 element
Background colour set
Padding set for at least 1 element
Margin set for at least 1 element
Italics effect set for at least 1 piece of text
To receive full marks, you must use HTML5 elements
These elements must be used in a semantically correct manner

Marking 

Y d t th W3C M k V lid t d th W3C CSS V lid t


Your code must pass the W3C Markup Validator and the W3C CSS Validator. 
Any images used must be either owned by you or are under an applicable public license. Note that most major search
engines have an image search feature which allows you to filter results by license type. You will be marked down for not
crediting images you find online. 
Your website will be viewed and marked in Firefox on Turing. Test your website on this browser and system to make sure
everything looks correct. 

Submission

Submit your assignment as a single .zip or .tgz archive


Make sure your directory structure matches the criteria

Marking Criteria

COSC260 - Assignment 1

Layout 30

HTML/HTML5 30

CSS 20

Coding Style 15

Content 5

Total: 100

allGeeks.txt 29 June 2022, 6:06 PM


reset.css 25 June 2021, 1:47 PM

Submission status

Submission No attempt
status

Grading status Not graded

Due date Sunday, 24 July 2022, 11:59 PM

Time remaining 5 hours 34 mins

Last modified -

Submission
comments  Comments (0)

You have not made a submission yet.


Jump to...

You might also like