Develop TWO CSS files that style the web pages, one for a desktop and another for a mobile phone. The webpages must be styled to suit the corresponding device, e.g., the layout, font size and the sizes of the major components of the webpages.
Demonstrate a range of selectors, including but not limited to:? element e.g., hl {}, p {}
? class, e.g., .image {}, .highlighted {}
? id e.g., tttbName {}
? grouping e.g., hl, h2, h3 {}
? contextual e.g., ulli{}
? pseudo-classes e.g., :hover {}
Demonstrate the following groups of CSS properties:
• Menu e.g., style a navigator that contains links to all web pages
• Web Typography e.g., fonts, colors, text alignment
• Box Model and Visual Formatting e.g., border, margin, padding, width, height, background image
• Liquid Page Layout i.e., page layout adapts as you resize the browser window
Use of other CSS selectors and CSS properties are encouraged, as necessary and appropriate for styling the webpages.
3
COS10024 Web Development - Assignment 1 (TP3/2020)
Please properly organise your CSS code and include comments within your CSS code as needed, e.g., /* * banner style */.
Creativity is strongly encouraged in the web site design. Creative designs will be rewarded with bonus marks.
Section Three: CSS Animations (20 marks)
Implement 2 different CSS animations. There are many types of CSS animations. Take your pick and make sure they are applied to appropriate HTML elements. Feel free to use Google or any source of information you deem appropriate to look up the code you need to implement the CSS animations.
Create a fourth page named animations.html and 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.
[IMPORTANT] All CSS files must be fully validated against CSS3 without errors, on http://validator.w3.org or using Web Developer (Firefox add-on or Chrome extension).
Assignment Submission
The assignment should be submitted as an individual work through CANVAS (Electronic Submission) and into the mercury sever on or before the deadline.
• Create a folder/directory -assign!- for your website files and folders. In folder -assign!-, create a subfolder -images- for images used for content and a sub-folder -style- for your CSS files.
• Compress folder -assign!- and all your HTML files, images files and CSS files into a zip file named -assignl.zip- and submit it through CANVAS.
• All deliverables must be submitted in this zip file.
Before submitting the assignment, please ensure that you have completed or considered the following:
• Check if you have fulfilled the requirements and avoided the deductions in the Marking Scheme
• Check the Canvas for announcements related to the assignment.
• The assignment is your original work. If your assignment is not your original work, your result will be zero 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 penalties.
• Make sure you contact the convenor before the due date, if you are having trouble in completing the assignment on time.
Comments
Post a Comment