ELECTRONIC ASSIGNMENT COVERSHEET

Course/Unit Information
Course Pearson BTEC International Level 3 Foundation Diploma in
Information Technology
Unit No. and Name Unit 6: Website Development
Unit code
Unit Type Internal set assignment
Schedule Code L3/WDSCRM2505A

Instructor Information
Name
Email ID
Contact Number

Assignment Information
Full/ Part Assignment
Date Assignment Issued
Date Assignment Due

Student Information
(To be filled by the student prior submitting the assignment)
Name
Student ID
Email ID
Date of Submission

Your assignment should meet the following requirements.

Please confirm this by ticking 🗹 the boxes before submitting your assignment
The first page is completely labeled with my name, instructor name and assignment
□ information.
□ I have completed and ticked the declaration page.
The contents of my assignment have been submitted to Turnitin and I have
□ downloaded the report.
□ I have strictly followed Harvard Referencing Style and Citations.
 Student Declaration

I, ------------- hereby confirm that this assignment is my own work and not copied or
plagiarized. It has not previously been submitted as part of any assessment for this
qualification. All the sources, from which information has been obtained for this
assignment, have been referenced as per Harvard Referencing format. I further confirm
that I have read and understood the Demont IMT rules and regulations about plagiarism
and copying and agree to be bound by them.

Students Signature :

Student Name :

Date :

Turn it in :
The full Turn it in report in PDF Format must be uploaded on the LMS along with
the Assignment Brief.

Overall Result/Grade PASS/ [To Achieve a PASS, all P grade

 descriptors should be achieved; To Date:
MERITDISTI achieve a MERIT, all P and M grade
NCTION/ descriptors should be achieved; To
REDO achieve a DISTINCTION, all P, M
and D grade descriptors should be
achieved.]
Summative Feedback:

Overall Feedback on
current work with
emphasis on how the
student can improve and
achieve higher grades in
future.

GENERAL GUIDELINES
(Please read the instructions carefully)

1. Complete the title page with all necessary student details and ensure that the signature of
the student is marked in the declaration form.
2. All assignments must be submitted as an electronic document in MS Word to the LMS
(Use 12 Times New Roman script).
3. All assignments must be submitted with an accompanying Turnitin report.
4. Assignment that is not submitted to the LMS by the prescribed deadline will be accepted
ONLY under the REDO and RESIT submission policy of Demont IMT.
5. The results are declared only if the student has met the mandatory attendance requirement
of 75% and/or a minimum of 50% under extenuating circumstances approved and ratified
by the Academic Director. The student has to repeat the module (with additional fees
applicable) if the attendance is below 50%.
6. The assignment should not contain any contents including references cited from
websites like www.ukessays.com, www.studymode.com, www.slideshare.net,
www.scribd.com.
7. Students can refer Wikipedia as a source of information, but the references cited in
Wikipedia must be mentioned.
8. Submit the assignment in a MS Word document with the file name being:
First Name Last Name_ abbreviation of the subject.
Example: John Smith_TFCP

Quick reference Checklist for the Faculty/Instructor to accept/reject the assignment

before evaluation:
 □ Adherence to the deadline of submission date.
□ Original file, cover sheet and format retained.
□ Student information and signature intact.
□ Font style and size used as instructed.
□ Harvard Referencing Style is strictly followed.

Assignment title Website Development

LA A Understand the principles of website development

LA B Design a website to meet client requirements

Develop a website to meet client requirements

LA C

SET ASSIGNMENT
Hole in one is a golf resort in Portugal. The company has recently seen an increase in demand
for the facilities and products it provides. To meet this demand, it wants to improve how it
uses information technology.
The owners have decided to develop a company website. You work for a web development
company that has been contracted to design and create the website.
The table shows some basic information about the company, as well as some of its
requirements. You should use this information to help you when designing and creating the
website.

Facilities • Three championship golf courses including the famous Sea View
offered course
• Two clubhouses
• Hotel accommodation
• Restaurants and café
• Pro shop
• Other activities:
• floodlit driving range
• golf lessons
• digital coaching
• caddie service.
Personalis • Five rounds:
ed • five night full board stay in a luxury suite
packages • five 18 hole rounds
offered • one guaranteed round on the famous Sea View course
• complimentary digital coaching session.
• Triple tee:
• two night stay in a double room with breakfast
• three 18 hole rounds including one on the famous Sea View
course (if available)
• complimentary buggy hire
• 20% discount for the pro shop.
• Getaway break:
• overnight stay with full breakfast
• dinner in any of the resort’s restaurants
• access to courses (charges will apply and excludes the Sea View
course)
• complimentary club hire.
• Custom packages are available for corporate events and
longer stays. Clients must contact the company to arrange any
custom packages.
Initial • Modern and engaging design
website • Provide potential clients with information about:
requireme • the company and the services and products it offers
nts • general help and advice on packages.
• Allow clients to contact the company to ask for further information
• An adaptive layout for users accessing with either
mobile or desktop browsers
• Accessibility features to enable a wide range of users to use the site
easily.

Set Assignment

You must complete ALL activities.

ACTIVITY 1 – suggested time 2 hours

The owners of the company are eager to have a high-quality website and
have asked you to provide them with information about how other
websites meet the needs of the website owners.
You should research two websites that have a similar purpose and/or
in a similar area of business.
You must:

• compare the design and features of the two identified websites

 • consider the suitability of the website’s features and design for the
intended purpose and audience
• analyse how web design and development principles are used

• provide a supported evaluation of how well each website meets

the needs of the website owner and its users.
You should consider any positive or negative aspects of the two websites.
Use specific examples of these to support the points you make in your
report.
This activity covers
learning aim A.
A.P1, A.M1, A.D1

ACTIVITY 2 – suggested time 4 hours

The owners of the company would like to see some initial designs for the
website before you start developing it.
Create comprehensive designs for the website which include:

• identification of user requirements

• visual designs for the pages

• alternative design options

• technical documentation.
You should use the Set Assignment Information and what you learned
through your research in Activity 1 to inform your designs.

This activity covers learning aim B. B.P2

ACTIVITY 3 – suggested time 2 hours
You now need to seek feedback in order to improve the quality and
appropriateness of your designs. You must:
• show your designs to others

• gather and analyse the feedback you receive

• identify areas of the designs that could be improved

• further develop/improve your designs using the feedback given.

You must provide justification of your design decisions, including how
you responded to any feedback you received. You should include:
• how the designs will meet user needs and be fit for purpose

• consideration of alternative design options

• which suggested changes you made, which you didn’t and why.

This could be in the form of annotations on the designs or as an additional

piece of written evidence.
This activity covers
learning aim B.
B.P3, B.M2
ACTIVITY 4 – suggested time 10 hours
You must now develop the website for
the client. During the development of
the website you must:

• create the website using suitable tools and content

• use appropriate test plans, test schedules and data to test the site for:

• functionality

• compatibility (with different devices and browsers)

• usability (including user testing).

You must also seek feedback in order to improve the quality and
appropriateness of your website. You must:
• show your website to others

• gather and analyse the feedback you receive

• identify areas of the site that could be improved

• further develop/improve your designs using the feedback given.

During testing and feedback activities you should collect any results
and feedback you have received and document how you have
responded to any problems or errors identified. This evidence should
include:

• ‘before’ and ‘after’ versions of the website showing

notable changes made during development

• details of how the website has been ‘optimised’ based on

results of testing and user feedback.
This activity covers
learning aim C.
C.P4, C.P5, C.M3
ACTIVITY 5 – suggested time 2 hours
The development of the website is now complete and your manager has
asked you to review the extent to which the project meets the client’s
needs.
Write an evaluation of the design, development and optimisation of the
website. Your evaluation must:
• consider how effectively the website:

• meets the client’s requirements

• appeals to and meets the needs of the target audience

• achieves its stated purpose

• compare features of the final website with other solutions that could have been used

• provide a detailed and balanced evaluation of what the website does

well and areas for improvement
• review your own skills, performance and behaviours and the impact
that this had on the development of the final website.
Your evaluation should be supported by evidence from all stages of the
project to reach conclusions and suggest developments.
This activity covers learning
aims B and C. C.P6, BC.D2,
BC.D3

You should include:

● Design criteria- wireframes
● Layout to support the answer
● Methodologies about your research strategy
● Examples of similar websites
● Final code execution.
● Create your drive link with all the final code execution ad screen recording and
supported html/css/Javascript files.
Make a document to explain all questions given in the assignment brief.
Sources to refer:

● Tutorials
Links:
❖ https://www.w3schools.com/html/default.asp
❖ https://www.w3schools.com/js/

Website Comparison Report

Websites Compared: Canva vs. Wix

Introduction

This report compares two successful websites—Canva and Wix—which operate in the
online design and web creation industry. Both serve a wide range of users including
individuals, small businesses, and designers. The aim is to understand how each site meets its
owners' and users' needs, based on web design principles, features, and overall performance.

Comparison of Design and Features

Feature/Criteria Canva Wix

Purpose Online graphic design tool Website builder platform

Designers, marketers, students, Entrepreneurs, creatives, small
Target Audience
small businesses businesses
Clean, minimalist, grid-based Customisable, modern, sometimes
Design Style
layouts dense with options
Simple top bar with icons and Main menu with dynamic side/top
Navigation
drop-downs menus
Fully responsive templates with some
Responsiveness Fully responsive across devices
flexibility
High-quality graphics, animation, Interactive templates, video, and
Visual Elements
video animation blocks
Content Dashboard with editable website
Categorised templates and tools
Organisation sections
Heavier load due to drag-and-drop
Performance Fast, lightweight interface
and widget scripts
High contrast, alt text, keyboard Some alt text support, less consistent
Accessibility
nav across themes
Wix ADI, AI support, help center,
Support Features Help center, live chat, tutorials
live chat

Suitability for Purpose and Audience

  Canva:
Canva’s purpose is to enable users to create professional designs without graphic
design experience. The clean layout and intuitive drag-and-drop interface make it
highly suitable for a general audience, especially students, marketers, and non-
designers. Its mobile app support ensures usability on the go.
 Wix:
Wix’s audience includes entrepreneurs and creatives wanting to build a website
without coding. Its flexible templates and AI-assisted tools are tailored to users with
different levels of technical skill. However, some advanced customisation features
may overwhelm less experience

Analysis of Web Design and Development Principles

Principle Canva Example Wix Example

Uses a uniform design across all Maintains template structure and

Consistency
pages and platforms styling across pages
Clear CTA buttons, tooltips, drag- Step-by-step prompts, modular builder
Usability
and-drop editor interface
Seamlessly adapts to mobile, tablet, Responsive templates but sometimes
Responsiveness
desktop element overlap
Provides keyboard navigation, colour Mixed results—some themes lack
Accessibility
contrast tools good alt text usage
May lag on lower-end devices due to
Performance Loads quickly; optimised assets
rich features
Simple and clear navigation; intuitive Custom menus; can become cluttered
Navigation
UI with widgets

Evaluation

🟢 Strengths

 Canva
o Highly intuitive and beginner-friendly interface
o Great responsiveness and performance
o Effective use of space and icons
o Excellent for quick, attractive outputs with minimal learning curve

Wix
 o Highly flexible website creation
o Offers advanced tools (SEO, eCommerce, blogging)
o Built-in AI (Wix ADI) personalises designs for users
o Integrations and app market add powerful features

🔴 Weaknesses

 Canva

o Limited in-depth customisation for advanced users

o Not designed for full-scale websites

 Wix

o Heavier performance footprint

o Some templates lack strong accessibility support
o Potentially overwhelming for beginner

Conclusion

Both Canva and Wix effectively meet the goals of their respective owners and target
users by applying strong web design principles. Canva focuses on simplicity, speed,
and accessibility, ideal for fast visual content creation. Wix delivers a powerful and
flexible platform for website creation but with added complexity and resource load.

Website Design and Documentation

Identification of User Requirements

Client Profile:

Derny-Designs Group Ltd. is a modern creative agency that offers design services (branding,
graphic design, print material) to small businesses and entrepreneurs.

Target Audience:

 Small business owners

 Startups and entrepreneurs
 Marketing professionals
 Students needing design support

User Requirements:

Type Requirement
Home page, About Us, Services, Portfolio, Contact page with enquiry
Functional
form
Visual Clean and modern aesthetic, easy navigation, visual gallery for portfolio
Mobile responsive, browser compatible, accessible (alt text, readable
Technical
fonts)
Usability Simple layout, fast load time, clear call-to-actions (CTAs)
SEO/Performance Basic meta tags, optimised images, fast loading scripts

Visual Designs for Pages (Wireframes)

Homepage Wireframe

 Header: Logo + navigation (Home, About, Services, Portfolio, Contact)

 Hero Banner: Big image + call to action (“See Our Work”)
 Service Teasers (3 icons/boxes)
 Client Testimonials
 Footer: Contact info + social media links
About Page

 Header: “Our Story”

 Content: Paragraph about company mission
 Team section with images/names
 Timeline or milestones

📄 Services Page

 List of services with icons

 Each service block has a short description and “Learn more” button
 Side CTA to request a quote

📄 Portfolio Page

 Grid of past projects with hover effects

 Categories to filter (branding, print, web design)
 Clicking opens a detailed project modal or page

📄 Contact Page
 Contact form (Name, Email, Message)
 Map embed for location
 Contact details (Phone, Email, Social links)
Alternative Design Options

Here’s how you can present two different homepage styles:

Design Option 1 – Classic &

Aspect Design Option 2 – Bold & Visual
Clean
Colour White background, pastel accent Dark background, neon or contrast colour
Scheme colours buttons
Layout Grid-based with minimal icons Full-width sections with bold text
Font Style Sans-serif (e.g., Open Sans) Custom display fonts for headings
Hero Image Static image banner Video background banner

Technical Documentation

Tools & Technology

Category Details

HTML/CSS/JS Website will be written in HTML5, CSS3, and JavaScript

Code Editor Visual Studio Code
Graphics Created using Canva or Adobe XD
Hosting GitHub Pages / Netlify (optional)

Sitemap (Structure)

File Naming Conventions

File Type Naming Example

HTML Pages index.html, about.html, contact.html

CSS File style.css
JS File main.js
Image Folders assets/images/

Accessibility Checklist

 Use of alt tags for all images

 Font size: minimum 16px for body text
 High contrast text (e.g., black on white or white on dark grey)
 Tab navigation supported for all interactive elements
 ARIA roles where applicable

Justification of Design

 The clean layout ensures users can easily find and interact with content, meeting
usability goals.
 Multiple CTAs (Calls to Action) are placed to drive engagement and conversions
(e.g., portfolio, contact).
 The design is both aesthetic and responsive, ensuring accessibility across devices.
 Alternative layout options allow for flexibility and creativity depending on the
client’s visual preference
Show Designs to Others & Collect Feedback

Identify Areas for Improvement

Based on feedback:

Area Problem/Opportunity Suggested Change

Hero Section Lacks introduction text Add a tagline or headline under the logo
Navigation Not clearly responsive Plan to implement responsive mobile menu
Services Section Too minimal Add short description under each service card
Visual Design Too grayscale, lacks branding Add brand colours in icons/buttons

Improved/Updated Design (Describe the Changes)

📄 Updated Homepage Wireframe Description:

Changes Made:
  Added a short tagline above the “See Our Work” button in the hero section.
 Included brief descriptions (1-2 lines) under each of the three service boxes.
 Highlighted the CTA buttons with a subtle accent colour (brand colour).
 Reorganised the top navigation bar to collapse into a hamburger menu on mobile.

Justification of Design Decisions

Design Decision Justification

Makes the message more immediate and clear to first-time

Added tagline to hero section
visitors
Helps potential clients better understand what is offered,
Expanded service descriptions
improving communication
Included branding colors in Adds visual interest and reinforces company identity without
buttons/icons overwhelming the design
Implemented mobile- Improves usability on tablets and smartphones, meeting user
responsive navigation accessibility and functional needs
 ACTIVITY 4
Golf reservation Website
Html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Golf Playing Reservation</title>
<link rel="stylesheet" href="code.css" />
</head>
<body>
<div class="background-overlay">
<header>
<h1>Golf Playing Reservation</h1>
</header>

<main>
<section class="reservation-form">
<h2>Book Your Tee Time</h2>
<form id="golfReservationForm">
<label for="name">Full 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="date">Reservation Date:</label>

<input type="date" id="date" name="date" required />

<label for="time">Tee Time:</label>

<input type="time" id="time" name="time" required />

<label for="players">Number of Players:</label>

<input type="number" id="players" name="players" min="1" max="4"
required />

<button type="submit">Reserve Now</button>

</form>

<p id="confirmationMessage"></p>
</section>
</main>
 <footer>
<p>&copy; 2025 Golf Club Reservations</p>
</footer>
</div>

<script src="script.js"></script>
</body>
</html>

/* General resets and fonts */

* {
box-sizing: border-box;
}

body, html {
margin: 0;
padding: 0;
font-family: 'Arial', sans-serif;
height: 100%;
}

/* Background image overlay */

.background-overlay {
background: url('https://images.unsplash.com/photo-1564564295391-
7f24f26f568b?auto=format&fit=crop&w=1470&q=80') no-repeat center center/cover;
position: relative;
min-height: 100vh;
color: #fff;
}

.background-overlay::before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.5); /* Dark overlay for readability */
z-index: 0;
}
/*CSS */:

/* Header styling */
header {
 position: relative;
text-align: center;
padding: 2rem 1rem;
z-index: 1;
}

header h1 {
margin: 0;
font-size: 2.5rem;
color: #fdd835;
}

/* Main content */
main {
display: flex;
justify-content: center;
align-items: center;
min-height: calc(100vh - 120px);
position: relative;
z-index: 1;
padding: 1rem;
}

/* Reservation form styling */

.reservation-form {
background: rgba(255, 255, 255, 0.9);
color: #333;
padding: 2rem;
border-radius: 15px;
max-width: 400px;
width: 100%;
box-shadow: 0 0 15px rgba(0,0,0,0.3);
}

.reservation-form h2 {
text-align: center;
margin-top: 0;
color: #00796b;
}

label {
display: block;
margin-top: 1rem;
font-weight: bold;
}
input {
width: 100%;
padding: 0.5rem;
margin-top: 0.5rem;
border: 1px solid #ccc;
border-radius: 5px;
}

button {
margin-top: 1rem;
background-color: #00796b;
border: none;
color: #fff;
padding: 0.75rem 1.5rem;
border-radius: 5px;
cursor: pointer;
font-size: 1rem;
width: 100%;
transition: background-color 0.3s ease;
}

button:hover {
background-color: #004d40;
}

#confirmationMessage {
margin-top: 1rem;
font-weight: bold;
color: #00796b;
text-align: center;
}

/* Footer styling */
footer {
position: relative;
text-align: center;
padding: 1rem;
background: rgba(0, 0, 0, 0.6);
z-index: 1;
}

footer p {
margin: 0;
color: #fdd835;
}
Java Script:
document.getElementById("golfReservationForm").addEventListener("submit",
function (e) {
e.preventDefault();

const name = document.getElementById("name").value;

const email = document.getElementById("email").value;
const date = document.getElementById("date").value;
const time = document.getElementById("time").value;
const players = document.getElementById("players").value;

const message = `Thank you, ${name}! Your reservation for ${players}

player(s) on ${date} at ${time} has been received. A confirmation email will
be sent to ${email}.`;

document.getElementById("confirmationMessage").textContent = message;

// Optionally, clear the form

this.reset();
});

LINK:
golfresv.netlify.app
The website it hosted on Netlify Free domain. Hence forth the Website is completely Made
by Me.
The User Interface was updated based on Suggestions and feedbacks…
The Website is Compatible with any of the Devices using chrome….
 ACTIVITY 5
Methodologies about your research strategy:

The research was completely based on the

experience gained by the previous Activities that
has been done.
https://drive.google.com/drive/folders/1cxRa6QiAGYGsdf8XnNFNdRW5v82UQgAQ?
usp=sharing