| Category | Details |
|---|---|
| Trimester | T3 2025 |
| Unit Code | HS1021 |
| Unit Title | Web Design |
| Assessment Type | Group Assignment |
| Weight | 60% |
| Submission Guidelines | 1. All work must be submitted on Blackboard by the due date along with a completed Assignment Cover Page.<br>2. The assignment must be in MS Word format unless otherwise specified. |
| Academic Integrity Information | Holmes Institute is committed to ensuring and upholding academic integrity. All assessments must comply with academic integrity guidelines. Please learn about academic integrity and consult your teachers with any questions. Violating academic integrity is serious and punishable by penalties that range from deduction of marks, failure of the assessment task or unit involved, suspension of course enrolment, or cancellation of course enrolment. |
| Penalties | - All work must be submitted on Blackboard by the due date and time, along with a completed Assessment Cover Page. Late penalties apply.<br>- 20% penalty applicable for solo (single student) group submissions.<br>- Your answers must be based on Holmes Institute syllabus of this unit. Outside sources may not amount to more than 10% of any answer and must be correctly referenced in full. Over-reliance on outside sources will be penalised<br>- Reference sources must be cited in the text of the report and listed appropriately at the end in a reference list using Holmes Institute Adapted Harvard Referencing. Penalties are associated with incorrect citation and referencing. |
Group Assignment Guidelines and Specifications
Assessment Title:
Group Website Design Project
Assessment Overview (Group Work - 60 Marks Total)
In this assessment, students will design, develop, and document a functional multi-page website using HTML5 and CSS (without automated code generators). Each team will simulate a real-world client project - communicating with a mock "client" to define requirements, produce technical and design documentation, and deliver a validated, professional website prototype.
Learning Outcomes Addressed
By completing this assessment, students will be able to:
Project Description
Each group will create a responsive website for a fictional or real small business, community organisation, or event (e.g., café, fitness club, charity, festival). The website must consist of at least four interlinked pages, including:
The website must:
Deliverables
1. Website Prototype (30 marks)
A working website in a compressed folder (groupname_website.zip) containing:
2. Design and Technical Documentation (30 marks)
Each group must submit a report (1,000-1,500 words) including:
Submission Requirements
Marking Rubric - Web Design Group Assessment (60 marks total)
Component 1: Website Prototype (30 marks)
| Criteria | Excellent | Good | Pass | Incomplete |
|---|---|---|---|---|
| Layout and Structure (8 marks) | Excellent structure with well-organised, semantic HTML5; clear hierarchy and consistent layout across pages. | Very good layout and logical HTML structure; minor inconsistencies. | Acceptable but with noticeable structural issues or inconsistent formatting. | Poor structure, missing elements, non-semantic HTML or broken layout. |
| Design and Aesthetics (8 marks) | Visually appealing and professional design; strong use of colour, typography, spacing, and alignment; excellent readability. | Cohesive design with thoughtful aesthetic choices; minor inconsistencies. | Basic design with limited attention to aesthetics or user experience. | Poor or distracting design; inconsistent styles or unreadable content. |
| Navigation and Usability (6 marks) | Seamless, intuitive navigation; consistent menus, clear links, and strong usability across all pages. | Logical and easy-to-use navigation; small usability issues. | Basic navigation with limited usability or broken links. | Confusing, inconsistent, or non-functional navigation. |
| Functionality (4 marks) | Fully functional and responsive; excellent use of images, media, and links; works flawlessly across browsers. | Minor functional or responsiveness issues but overall strong performance. | Limited functionality or noticeable display problems. | Major issues or non-functional site. |
| W3C Validation (4 marks) | Fully validated HTML5 and CSS with no significant errors; cross-browser compliant. | Minor validation warnings but compliant overall. | Several validation errors; inconsistent across browsers. | Fails W3C validation; major coding errors prevent correct display. |
Subtotal: /30 marks
Component 2: Design and Technical Documentation (30 marks)
| Criteria | Excellent | Good | Pass | Incomplete |
|---|---|---|---|---|
| Requirements Analysis (5 marks) | Comprehensive and realistic client needs analysis; strong communication evidence (e.g., meeting notes, emails). | Clear understanding of client needs; good communication record. | Minimal requirements identified; unclear communication process. | No clear requirements or communication evidence. |
| Design Documentation (8 marks) | Professional-quality site map, wireframes, and style guide; shows deep design thinking and visual planning. | Strong design documentation with logical structure and clarity. | Minimal or unclear design documentation. | Missing or very poor documentation. |
| Technical Detail (8 marks) | Excellent explanation of HTML/CSS structure, coding rationale, and problem-solving process. | Clear and detailed technical explanations; minor omissions. | Basic technical notes; lacks insight or precision. | No meaningful technical detail or understanding evident. |
| Professionalism & Clarity (5 marks) | Exceptionally clear, well-written, and professionally formatted report; logical flow and correct citations. | Well-organised and mostly error-free report. | Understandable but lacks structure or contains frequent errors. | Poorly written or disorganised; difficult to follow. |
| Reflection Quality (4 marks) | Deep and insightful reflection on individual learning, teamwork, and challenges; strong self-awareness. | Thoughtful reflection with clear insights and lessons learned. | Superficial reflection with limited personal analysis. | Missing or irrelevant reflection. |
Subtotal: /30 marks
Note: This report is provided as a sample for reference purposes only. For further guidance, detailed solutions, or personalized assignment support, please contact us directly.
Project Name: Green Leaf Café Website
Group Members:
Submission Date: Week 12, T3 2025
Word Count: 1,350 words
This report documents the design, development, and implementation process for the Green Leaf Café website. Our team created a responsive, four-page website using semantic HTML5 and CSS to showcase a fictional organic café business. The website includes a Home page, About/Services page, Menu/Products page, and Contact page with form layout. The project demonstrates effective client communication, thoughtful design planning, and professional web development practices compliant with W3C standards.
Green Leaf Café is a fictional organic café located in Melbourne's CBD, specializing in healthy, sustainable food options and specialty coffee. The business targets health-conscious professionals aged 25-45 who value sustainability and quality ingredients.
Our team conducted mock client consultations through structured meetings to identify website requirements. Documentation of this process included:
Initial Client Meeting (Week 6):
Key Discussion Points:
Follow-up Email Communication (Week 7): Our team sent a requirements confirmation email summarizing:
Through our client communication process, we identified the following core requirements:
Functional Requirements:
Design Requirements:
Technical Requirements:
The website structure follows a flat hierarchy for easy navigation:
Home Page (index.html) | ___________________|___________________ | | | | About Us Menu/Products Gallery Contact Us (about.html) (menu.html) (gallery.html) (contact.html)
Navigation Logic:
Home Page Wireframe:
About/Services Page Wireframe:
Menu/Products Page Wireframe:
Contact Page Wireframe:
(Note: Actual wireframe diagrams would be included as visual appendices in the full report)
Our color scheme reflects the organic, natural brand identity:
Color Usage Rationale: The green represents freshness and organic values, brown adds warmth and earthiness, while cream provides a soft, welcoming background. This combination creates visual harmony while maintaining excellent readability.
Primary Font Family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
Font Hierarchy:
Line Height: 1.6 for body text (improves readability)
Font Justification: We selected web-safe fonts to ensure consistent display across all browsers without requiring external font downloads, improving page load speed.
Container Width: Maximum 1200px, centered with auto margins Padding Standards: 20px standard padding for sections, 40px for major divisions Margins: 15px between related elements, 30px between sections Border Radius: 8px for cards and buttons (modern, friendly appearance) Box Shadow: Subtle shadows (0 2px 5px rgba(0,0,0,0.1)) for depth
Grid System:
Buttons:
Images:
Navigation:
Our website employs semantic HTML5 elements throughout for improved accessibility and SEO:
Semantic Elements Used:
HTML File Structure:
greenleaf_website/ ├── index.html (Home page) ├── about.html (About/Services page) ├── menu.html (Menu/Products page) ├── contact.html (Contact page) ├── css/ │ └── styles.css (External stylesheet) └── images/ ├── logo.png ├── hero-banner.jpg ├── coffee1.jpg ├── food1.jpg └── (additional images)
Code Quality Practices:
External Stylesheet Organization:
Our styles.css file is organized in logical sections:
Key CSS Techniques Used:
Flexbox for Navigation:
nav ul { display: flex; justify-content: space-around; list-style: none; }
Grid Layout for Menu Items:
.menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
Responsive Design with Media Queries:
@media screen and (max-width: 768px) { .menu-grid { grid-template-columns: 1fr; } }
CSS Box Model Application:
Image Optimization:
Responsive Images:
<img src="images/hero-banner.jpg" alt="Green Leaf Café interior with customers" class="hero-image">
Contact Form Structure:
<form action="#" method="post" id="contact-form"> <label for="name">Name:</label> <input type="text" id="name" name="name" required> <label for="email">Email:</label> <input type="email" id="email" name="email" required> <label for="phone">Phone:</label> <input type="tel" id="phone" name="phone"> <label for="message">Message:</label> <textarea id="message" name="message" rows="5" required></textarea> <button type="submit">Send Message</button> </form>
Form Validation:
Testing Process: Our team tested the website across multiple browsers:
Compatibility Solutions Implemented:
Validation Results:
HTML Validation:
CSS Validation:
Validation Process:
Challenge 1: Responsive Navigation Menu
Challenge 2: Image Aspect Ratios
Challenge 3: Form Styling Across Browsers
Challenge 4: CSS Specificity Issues
This project significantly enhanced my understanding of semantic HTML5 and project management. Leading the team taught me the importance of clear communication and setting realistic milestones. I enjoyed structuring the HTML documents and ensuring consistency across all pages. The most challenging aspect was coordinating different team members' contributions and maintaining code quality. I learned that thorough planning with wireframes and site maps saves significant development time. For future projects, I would implement version control (like Git) earlier to better manage code changes. Overall, this experience demonstrated how web development requires both technical skills and collaborative teamwork to succeed.
As the CSS designer, I gained deep appreciation for the complexity of creating responsive, visually appealing websites. Developing the style guide helped me understand the importance of design consistency and user experience principles. Writing content that is both informative and concise challenged my communication skills. I struggled initially with CSS flexbox and grid layouts but overcame this through researching documentation and experimenting with different approaches. Working with teammates who had different coding styles taught me the value of establishing coding conventions early. This project strengthened my CSS skills and showed me that good design requires balancing aesthetics with functionality and accessibility.
My role focused on testing, validation, and documentation, which proved more complex than anticipated. Testing across different browsers revealed numerous subtle inconsistencies that required careful debugging. Learning to use W3C validation tools gave me confidence in producing standards-compliant code. Documenting our development process reinforced the importance of maintaining clear records for professional web projects. I initially underestimated how much time thorough testing requires but now recognize it as essential for quality assurance. Collaborating with my team improved my communication skills and taught me to provide constructive feedback. This project demonstrated that successful websites require attention to technical details, user experience, and professional documentation practices.
The Green Leaf Café website project successfully demonstrates our team's ability to design, develop, and document a professional multi-page website using HTML5 and CSS. Through structured client communication, we identified clear requirements and translated them into effective design and technical solutions. Our semantic HTML5 structure, thoughtful CSS styling, and responsive design approach resulted in a website that meets W3C standards and displays correctly across major browsers.
The project provided valuable hands-on experience in all aspects of web development—from initial planning and wireframing through implementation and validation. Each team member contributed unique skills while learning to collaborate effectively on a complex technical project. The challenges we encountered, such as responsive design implementation and cross-browser compatibility, strengthened our problem-solving abilities and technical understanding.
This experience reinforced that successful web development requires combining technical proficiency with design thinking, effective communication, and attention to detail. The skills and knowledge gained through this project provide a strong foundation for future web development work and demonstrate the practical application of concepts learned throughout the HS1021 Web Design unit.
End of Report
Get original papers written according to your instructions and save time for what matters most.
