DESCRIPTION OF COURS EWORK
Course Code Web Site Design Course Name G0302 Lecturer Valarmathie Gopalan (Group 1) Academic Session 2023/04 Assessment Title Assignment 1 (HTML & CS S)
A. Introduction/ Situation/ Background Information
This assignment will focus to evaluate the students’ ability to implement web pages using HTML and CSS. It is intended to elevate the students’ knowledge and skills in desi gning a web site.
B. Course Learning Outcomes (CLO) covered
At the end of this assessment, students are able to:
CLO 1 Construct a simple web site using the standard Web site language. (C3, PLO6) CLO 2 Use the foundation design language such as HTML and CSS. (C3, PLO2) CLO 3 Use a web editor such as Notepad to build web site. (C3, PLO2) CLO 4 Apply a second web -based language to improve the web site design. (C3, PLO6)
D. Instruction to Students
This assignment is on designing an education -based website. The theme is "Science is Fun " Students research must focus on a specific discipline, such as Biology, Chemistry, Physics, or Pure Science. The students are free to choose among them. You could additionally focus your research on a certain scien ce discipline . Make use of your creativity because Science is such a diverse subject. Reputable sources can be used to build the website, and the original author should be credited.
Students will be graded on the ir knowledge of and competency with HTML and CSS for this project. The prerequisites listed in section F are part of this assignment, which is worth 30% of the mark.
E. EvaluationBreakdown
No. Component Title Weight (%)
- Design Factors 10
- HTML Layout 10
- CSS Styling 10 TOTAL 30
F. Task(s)
You are required to develop one (1) website based on the requirements listed below:
- Complete this assignment individually.
- The website must consist of three (3) web pages. (Please refer to the wireframe section provided below).
- Implement the web pages with page layout as defined by the wireframe.
- Content (Please refer to section D ):
• Subject – choose a specific science discipline and use it as the title for your page and also the heading in your page header. • Images – choose relevant images according to your topic.
• Text – provide description and information which related to your topic and the ima ge.
- Use HTML elements as specified in the details of each wireframe.
- Choose bright color scheme (configure in your CSS) which you think is suitable and related to the content of the w eb pages for: • Background of all the HTML elements, for example: header, main, h1, footer, div, p, and other HTML elements. You can choose the color based on color wheel using either monochromatic, analogous, complementary, etc • Foreground: suitable font color(s) for all the text in the web pages, including text in the header, main and footer. Different text can have different color.
- Text properties and formatting
• Choose and configure the CSS for all the text inside the web pages using suitable font s ize, font family, font s tyle, etc. • Use sui table formatting if needed to emphasis or highlight segments in the text content.
- Margin, padding, border and others
• Configure proper margin, p adding, border (and etc.) if needed for all the HTML elements such that the web page will display the content as like the wireframe design.
- Submission Details:
• Compile a zip folder with html files, CSS files and images of your webpages.
Rename the zip folder as Student ID + Student N ame. Upload the zip folder in your
own OneDrive/Google drive account.
• Generate a link.
• Provide a word document with cover page, student declaration page and marking
rubrics. The content of the document would be your webpages’ snapshots and the
source codes . Paste the OneDrive/Google drive account in this document.
• Then, save the document in .pdf format. Rename the .pdf format file as Student ID
- Student Name. • Upload the .pdf file in Moodle. Make sure your.pdf document is within 20MB to be successfully upload in Moodle. • The submission due is on 18th May 2023 (Thursday) by 11:59pm .
REQUIREMEN TS:
- Student n eed to use Internal CSS only for this page.
- For layout, stu dents are required to use header, nav, main and footer mark-up ta g.
- The Navigation must be link to page 1, 2 and 3.
- Please include the details as follows:
✓ Create the header section with using
tag. ✓ Create the navigation section using
✓ Create the header section with using
REQUIREMEN TS:
- Student n eed to use external CSS only for this page.
- For layout, stu dents are required to use header, nav, main and footer mark-up ta g.
- The Navigation must be link to page 1, page 2 and page 3 .
- Students a re required to use table to create the layout f or contact form.
- Please include the details as follows:
✓ Create the header section with using
tag. ✓ Create the navigation section using