WebDevelopmentCOS10005
- University :
SWINBURNE UNIVERSITY of Technology Exam Question Bank is not sponsored or endorsed by this college or university.
SwinburneUniversityofTechnology
SchoolofScience,ComputingandEngineeringTechnologies
WebDevelopmentCOS10005
Assignment1,Semester1,2025
|
DueDate |
Wednesday9April2025,5:00PM |
|
SubmissionMethod |
Canvas |
|
ContributiontoFinalAssessment |
30% |
Purpose of theassignment
Anindividualassignmenttofamiliarisestudentswiththetechniquesandskillsinvolvedincreatingwebpages usingvalidatedHTML5andvalidatedCSS;loadingandtestingthewebsiteontheserver;anddemonstrating an understanding of HTML5 elements and attributes, CSS selectors and properties and their proper use. Moreover, it is to provide students with an appreciation of the importance of the separation of structured content from presentation as discussed in the lectures.
Tohighlightthis,theassignmentisspecifiedandevaluatedinthreesections.
- The development of validated HTML5
- The development of validated CSS files to present webpages on various
- The development of accessible webpage
- The implementation of CSS
SectionOne: HTML5 (40Marks)
CreateatleastTHREEwebpagesusingHTML5andwithatleastoneimageoneachwebpages,threeimages in total minimum. All images must be original, meaning you own those images.
TheInformationcontentonthesewebpagesshouldbeinformationaboutyou.Pleasemakesuretoinclude:
- Demographic information about you;
- A description of your hometown;
- A great achievement in your life (so far);
- A list of your favourite books, music and films or games;
- AHTMLtabletopresentyourweeklyacademictimetableat
ThefollowingHTMLelementsMUSTbeusedinthisassignment.Somewillbeusedonallpageswhileothers might only be used once.
- General elements o <head>, <title>, <meta>, <body>
- Structural elements o
, - Content elements o
, ,
- ,
- Menug.,styleanavigatorthatcontainslinkstoallwebpages
- Web Typography g.,fonts,colors,textalignment
- Box Model and Visual Formattingg.,border,margin,padding,width,height,backgroundimage
- Liquid Page Layoute.,pagelayoutadaptsasyouresizethebrowserwindow
- Create a folder/directory wd_assign1 for your website files andIn folder wd_assign1, create a sub-folder images for images used for content and a sub-folder style for your CSS files.
- Compress folder wd_assign1 and all your HTML files, images files and CSS files into a zip file namedwd_assign1.zip and submit it through Canvas.
- All deliverables must be submitted in this zip
- You can submit through Canvas and the latest submission overwrites the previous
- Check if you have fulfilled the requirements and avoided the deductions in the Marking Scheme
- Check the Canvas for announcements related to the
- The assignmentisyouroriginalIfyourassignmentisnotyouroriginalwork,yourresultwillbezero marks for this assignment.
- Validate and test your webpages on the Mercury server. If your assignment cannot be fully validated or properly displayed on the Mercury server, penalties will apply.
- Ensure that you submit before the due time to avoid
- ,
,
></> <>></> <><></> <><></> </> </> </> <></> <>>,<>,<>,<>,<>,<>> <>> <><>><></><>><>></> <>>>> <></> <>> <> <> <> < width>
element
e.g.,
h1{},p{}
class,
e.g.,
.image{},.highlighted{}
id
e.g.,
#tbName{}
grouping
e.g.,
h1,h2,h3{}
contextual
e.g.,
ulli{}
pseudo-classes
e.g.,
:hover{}
DemonstratethefollowinggroupsofCSSproperties:
Use of other CSS selectors and CSS properties are encouraged, as necessary and appropriate for styling the webpages.
PleaseproperlyorganiseyourCSScodeandincludecommentswithinyourCSScodeasneeded.e.g.,/* banner style */.
Creativityisstronglyencouragedinthewebsitedesign.Creativedesignswillberewardedwithbonusmarks.
SectionThree:CSSAnimations(20marks)
Implement 2 different CSS animations. There are many types of CSS animations. Take your pick and make suretheyareappliedtoappropriateHTMLelements.FeelfreetouseGoogleoranysourceofinformation you deem appropriate to look up the code you need to implement the CSS animations.
Create a fourth page named animations.htmland incorporate it into the menu navigator. On this webpage, list the animations that you have implemented and provides hyperlinks to where the animations are implemented.
AssignmentSubmission
TheassignmentshouldbesubmittedasanindividualworkthroughCanvasonorbeforethedeadline.
Beforesubmittingtheassignment,pleaseensurethatyouhavecompletedorconsideredthefollowing:
MarkingScheme
Theassignmentwillbemarkedoutof100.
Mark
Requirements
Deductions
HTML5
40
AllrequiredHTMLelementscreated (16)
Atleast3HTMLpagesoforiginal content (4)
Webpagesfullyvalidatedagainst HTML5 (10)
Sourcecodeproperlyindented, commented and organised (5)
Atleast3imagesinappropriate sizes (3)
Imagesareoriginal(2)
Webpagesnotfullyvalidatedagainst HTML5
Webpagesnotdisplayedproperly
Notenoughwebpages
LackofrequiredHTMLelements
Lackofrequiredcontents
DeprecatedHTMLelements/attributesused
EmbeddedorinlineCSS
Linksonwebpagesnotworking
Unoriginalcontents
Lackofrequiredimages
Unoriginalimages
Imagestoolargeortoosmall
BasicCSS
40
Allmajorcomponentsofwebpages properly styled, e.g.,
, , AllrequiredCSSselectors demonstrated (5)
Allrequiredpropertygroups demonstrated. (5)
2CSSfiles,onefordesktopandthe other for mobile phones. (5)
Appropriateandfluidpagelayout. (5)
CSSfilesfullyvalidatedagainstCSS3 (3)
CSScodeproperlyindentedand organised (2)
CSSpropertieslogicallygrouped (2)
Consistentstylesforallwebpages
(3)
CSSfilesnotfullyvalidatedagainstCSS3
CSSfilesnotproperlyappliedtowebpages
LackofrequiredCSSfile(s)
Notallmajorcomponentsofwebpages properly styled
Inappropriatewebpagelayout
Inappropriatecontrastbetweenforeground and background text colour
Nomajordifferenceinpagelayoutsfor desktop and mobile phones
Nocommentsorunclearcomments
LackofrequiredCSSselectors
Inconsistentstylesfordifferentwebpages
CSS
Animations
20
2differentCSSanimations
implemented.(10*2)
CSSanimationsdonotworkproperly.
CSSanimationsnotintegratedinthewebpage
Total
100
