Higher Nationals

STUDENT ASSESSMENT SUBMISSION AND

DECLARATION
When submitting evidence for assessment, each student must sign a declaration
confirming that the work is their own.

Student name: Assessor name:

Muhammad Ibrahim

Issue date: Submission date: Submitted on:

30 april 30 april 30 april

Programme:

Website Design & Development

Unit: Website Design & Development

Assignment number and title: Website Design & Development

Plagiarism
Plagiarism is a particular form of cheating. Plagiarism must be avoided at all costs and
students who break the rules, however innocently, may be penalised. It is your
responsibility to ensure that you understand correct referencing practices. As a
university level student, you are expected to use appropriate references throughout and
keep carefully detailed notes of all your sources of materials for material you have used
in your work, including any material downloaded from the Internet. Please consult the
relevant unit lecturer or your course tutor if you need any further advice.

Student Declaration
Student declaration
I certify that the assignment submission is entirely my own work and I fully understand
the consequences of plagiarism. I declare that the work submitted for assessment has
been carried out without assistance other than that which is acceptable according to
the rules of the specification. I certify I have clearly referenced any sources and any
artificial intelligence (AI) tools used in the work. I understand that making a false
declaration is a form of malpractice.

Student signature: Muhammad Ibrahim Date:

Website Design & Development Assignment

BTEC HN Student Submission and Declaration Form

Issue Date: Jan 2024 Owner: HN QD
DCL1 Public (Unclassified) Version 2.0
Higher Nationals

LO1: Server Technologies and Management Services for Hosting

and Managing Websites
Introduction
Knowing the fundamental server technologies and management tools required helps one
build and run a website. These elements guarantee the website is efficient, safe, accessible,
and functioning. For a company like DoBu Martial Arts, a consistent web presence relies on
selecting the appropriate mix of server hardware, software, and hosting providers.

Technology for Servers

A web server is a special kind of computer that saves all the information about a website
and sends it to users' browsers when they ask for it. Physical (on-premises) servers and
cloud-based servers are the two main types of hosting settings. Cloud servers, like those
offered by Amazon Web Services (AWS), Microsoft Azure, or Google Cloud, are scalable,
cost-effective, and handled remotely, making them perfect for small businesses. Physical
servers give you more control, but they need to be maintained and set up by hand. These
servers only work with certain running systems, like Linux or Windows Server. Linux is
widely used because it is safe, open source, and works with many programming languages,
such as PHP, Python, and JavaScript (Node.js). With web server software like Apache (which
is widely used and reliable), Nginx (which is small and quick), IIS (which runs on Windows),
and Tomcat (for Java apps), the server and web browser can talk to each other by handling
requests and sending the right information. (Moreb)

Services for Management

It takes more than just storing files to run a website. A lot of the time, hosting companies
offer basic services like managing domain names, setting up DNS, storing emails, installing

BTEC HN Student Submission and Declaration Form

Issue Date: Jan 2024 Owner: HN QD
DCL1 Public (Unclassified) Version 2.0
Higher Nationals
SSL certificates, and making regular backups. SSL certificates are very important because
they make HTTPS possible, which ensures that the link between the user and the website is
safe and encrypted. Web-based control panels, like cPanel, Plesk, or Webmin, make
managing a server or website easier by using a graphical user interface. This means that
even people who aren't tech-savvy can easily handle files, databases, and settings. A firewall
and antivirus software are some of the other tools that help protect the server from online
threats and downtime. (Gilmore)

Protocols for communication

Protocols like FTP (File Transfer Protocol) and SFTP (Secure FTP) make it easy to send files
and communicate securely. They also let developers upload and handle website files. Also,
HTTPS (Hypertext Transfer Protocol Secure) makes sure that all the information sent
between the user and the website is encrypted and safe from possible risks.

P1: Purpose and Types of DNS, and How Domain Names Are
Organized and Managed
Understanding the Purpose of DNS
The Domain Name System (DNS) is often called the "phone book of the internet," which is a
good name for it. Its main job is to turn domain names that people can understand, like
www.dobumartialarts.co.uk, into IP numbers that computers can use to talk to each other,
like 192.0.2.1. Without DNS, we would have to remember these very long lines of numbers
to get to websites, which most people would find very annoying. DNS lets people put in a
friendly name instead, which makes the internet a lot easier to use and faster. (Inamdar et
al.)

Different kinds of DNS

Different kinds of DNS servers do different things during the search process.

 Your internet service provider (ISP) will likely offer recursive DNS servers. These servers handle DNS calls
for users.

BTEC HN Student Submission and Declaration Form

Issue Date: Jan 2024 Owner: HN QD
DCL1 Public (Unclassified) Version 2.0
Higher Nationals
 For changing domain names, Root DNS Servers are the first stop. They send the request to the right top-
level domain server.
 Top-Level Domain (TLD) servers take care of domain extensions like .com, .org, .co.uk, and more.
 The real records for domain names are kept on authoritative DNS servers. In the end, they answer the DNS
query and lead straight to the right IP address of the website that was asked for. (Brovick et al.)

How Domain Names Are Organized

Domain names are organized in a way that looks like a tree. The Top-Level Domain (TLD),
like .com, .org, or. .uk comes first and is read from right to left. The Second-Level Domain
(SLD) is usually the name of the business, such as dobumartialarts.de. To separate or
organize different parts of a website, subdomains like blog.dobumartialarts.co.uk can be
added.

How Domain Names Are Managed

Global groups like ICANN (Internet Corporation for Assigned Names and Numbers) are in
charge of domain names. ICANN handles the assignment of top-level domains (TLDs) and
works with registrars to make sure everything runs smoothly. Domain name users can
register their sites with reputable registrars such as Google Domains, GoDaddy, or
Namecheap. Once a domain name is registered, its owner can change things like A records
(which point to IP addresses), CNAME records, and MX records for email services through
their hosting control panel or the registrar's website. (National Research Council et al)

P2: Communication Protocols, Server Hardware, Operating

Systems, and Web Server Software in Web Design and Hosting

The Role of Communication Protocols

Communication protocols are the rules that govern how data is transmitted over the
Internet. The most commonly used protocol for websites is HTTP (Hypertext Transfer
Protocol), and its secure version is HTTPS. HTTPS encrypts data between the user's browser
and the web server using an SSL certificate, which is especially important when personal

BTEC HN Student Submission and Declaration Form

Issue Date: Jan 2024 Owner: HN QD
DCL1 Public (Unclassified) Version 2.0
Higher Nationals
information is being shared, like when a user signs up for a class on the DoBu Martial Arts
website.

Another vital protocol is FTP (File Transfer Protocol), which is used by developers to upload,
download, or manage website files on the server. A more secure alternative is SFTP (Secure
FTP), which adds encryption to protect the file transfer process. These protocols ensure safe
communication between users, developers, and the website’s hosting environment.

Understanding Server Hardware

Server hardware is the physical machine where the website files and databases are stored.
These machines are more powerful than typical personal computers and are designed to
handle multiple requests from users at the same time. For example, when many people visit
DoBu Martial Arts' website to check class schedules, the server ensures that each visitor can
access the information without lag or downtime.

Servers usually include high-performance CPUs, ample RAM, and storage designed for speed
and reliability. This hardware is housed either on-site (self-hosted) or, more commonly, in
data centers managed by third-party hosting providers. (Roberts)

Importance of Operating Systems

The operating system (OS) installed on the server controls how the server functions. The
two most common OS types used in web hosting are Linux and Windows Server. Linux is
open-source, highly stable, and supports popular web technologies like PHP, MySQL, and
Apache, making it ideal for small to medium-sized websites. Windows Server, on the other
hand, is best suited for sites that require Microsoft technologies like ASP.NET or MSSQL.

Choosing the right OS depends on the technologies used in building the website. For
instance, if DoBu Martial Arts' website uses PHP and MySQL, Linux would be a better choice.

Web Server Software

BTEC HN Student Submission and Declaration Form

Issue Date: Jan 2024 Owner: HN QD
DCL1 Public (Unclassified) Version 2.0
 Higher Nationals
Web server software acts as a bridge between the website and the browser. Popular options
include Apache, Nginx, IIS (Internet Information Services), and Tomcat. These programs
handle requests from users, fetch the correct web pages from the server, and deliver them
to the browser. Apache is one of the most widely used due to its flexibility and large
community support. Nginx is valued for its speed and low resource usage, making it ideal for
high-traffic websites.(LISTER)

M1: Analyzing the Impact of Common Web Development

Technologies and Frameworks on Website Design, Functionality,
and Management

Ste Test Steps Test Data / URL Expected Actual Status

p Result Result (Pass/Fail)
1 Navigate to file:///C:/Users/Aashir%20Khan/OneDrive/Documents/Test/asher/car- User User Pass
the home page dealer-website-template-98/index.html should successfully
be able navigates
to access to the
the home page
home
page
2 Test navigation file:///C:/Users/Aashir%20Khan/OneDrive/Documents/Test/asher/car- User All buttons Pass
buttons dealer-website-template-98/index.html should navigate
be able correctly to
to access respective
other pages
sections
through
buttons

BTEC HN Student Submission and Declaration Form

Issue Date: Jan 2024 Owner: HN QD
DCL1 Public (Unclassified) Version 2.0
 Higher Nationals
3 Browser file:///C:/Users/Aashir%20Khan/OneDrive/Documents/Test/asher/car- Website Website Pass
compatibility dealer-website-template-98/index.html should loads and
testing work functions
across correctly
multiple on all
browsers tested
(Chrome, browsers
Edge,
Firefox)
4 Mobile view file:///C:/Users/Aashir%20Khan/OneDrive/Documents/Test/asher/car- The The Pass
responsiveness dealer-website-template-98/index.html website website is
should fully
display responsive
correctly and
on mobile-
mobile friendly
devices
5 User Interface file:///C:/Users/Aashir%20Khan/OneDrive/Documents/Test/asher/car- The UI is Pass
testing dealer-website-template-98/index.html website visually
should appealing,
have a loads
clean, quickly, and
secure, feels
and user- secure
friendly
interface

Web development has evolved rapidly over the years, with new technologies and
frameworks emerging to meet growing user expectations for fast, dynamic, and responsive
websites. These tools greatly influence how websites are designed, how they function, and
how they are managed and maintained over time. Understanding their impact helps
developers create better solutions tailored to both business goals and user experience. For a
site like DoBu Martial Arts, which requires both interactive features and simple navigation,
choosing the right technologies can make a major difference.

Front-End Technologies and Their Influence

BTEC HN Student Submission and Declaration Form

Issue Date: Jan 2024 Owner: HN QD
DCL1 Public (Unclassified) Version 2.0
 Higher Nationals
The front-end of a website is what users interact with directly. Technologies like HTML5,
CSS3, and JavaScript are essential building blocks. HTML5 provides structure, CSS3 handles
the look and feel, and JavaScript makes websites interactive. (W3Schools)

Frameworks built on these languages, such as Bootstrap, React, and Vue.js, make it easier to
build responsive, mobile-friendly designs quickly. For example, using Bootstrap, a developer
can create a layout that automatically adjusts to screen sizes, which is essential for users
accessing the Dobu website on smartphones.

Back-End Technologies and Functional Management

Step Test Steps Test Data / URL Expected

Result
1 Navigate file:///C:/Users/Aashir%20Khan/OneDrive/Documents/Test/asher/car-dealer-website- The user
template-98/index.html should be
able to
access

2 Test navigation file:///C:/Users/Aashir%20Khan/OneDrive/Documents/Test/asher/car-dealer-website- The user

buttons template-98/index.html should be
able to
access

3 Browser file:///C:/Users/Aashir%20Khan/OneDrive/Documents/Test/asher/car-dealer-website- The website

compatibility template-98/index.html should work
across
multiple
browsers (

4 Mobile view file:///C:/Users/Aashir%20Khan/OneDrive/Documents/Test/asher/car-dealer-website- The website

responsiveness template-98/index.html should

BTEC HN Student Submission and Declaration Form

Issue Date: Jan 2024 Owner: HN QD
DCL1 Public (Unclassified) Version 2.0
Higher Nationals

BTEC HN Student Submission and Declaration Form

Issue Date: Jan 2024 Owner: HN QD
DCL1 Public (Unclassified) Version 2.0
Higher Nationals
The back-end is where most of the logic, database handling, and server interactions happen.
Technologies like Node.js, PHP, and Python allow developers to handle user requests, store
data, and perform complex operations.

For example, Node.js is a popular back-end framework that’s fast and efficient, particularly
for applications that require real-time data handling, like an online booking system for gym
classes. PHP, on the other hand, is widely used with MySQL databases and is especially good
for creating membership login features, which would be ideal for DoBu Martial Arts.

Frameworks like Express.js (for Node.js) or Laravel (for PHP) provide structure and pre-built
functions that save time and reduce bugs. These frameworks also make it easier to
implement security features such as login validation and data protection. (W3SCHOOLS)

BTEC HN Student Submission and Declaration Form

Issue Date: Jan 2024 Owner: HN QD
DCL1 Public (Unclassified) Version 2.0
Higher Nationals

BTEC HN Student Submission and Declaration Form

Issue Date: Jan 2024 Owner: HN QD
DCL1 Public (Unclassified) Version 2.0
Higher Nationals

Comparison Table of Common Frameworks

Framework Type Strengths Use Case Example

React Front- Component-based, fast Dynamic class timetable

End rendering

Bootstrap Front- Mobile responsive, easy layout Home and pricing page design
End building

Node.js Back- Fast, handles real-time data Membership system, booking

End forms

Laravel Back- Secure, MVC architecture Account management, class

End schedules

WordPress CMS Easy content updates, plugin- Blog or news section (if
based needed)

M2: Review of Search Engine Influence on Website Performance

and SEO Strategies.
Search engines like Google, Bing, and Yahoo play a crucial role in how websites are
discovered and accessed by users. The majority of website traffic often comes from organic
search engine results. This makes search engine optimization (SEO) one of the most
important strategies in improving a website’s visibility and performance online. For a

BTEC HN Student Submission and Declaration Form

Issue Date: Jan 2024 Owner: HN QD
DCL1 Public (Unclassified) Version 2.0
Higher Nationals
business like DoBu Martial Arts, ranking higher in search engine results means more
potential members finding the gym, reading about its services, and signing up for classes.
(Mozilla)

How Search Engines Influence Website Performance

Search engines crawl, index, and rank websites based on hundreds of factors. They assess
everything from the relevance of the content to how fast a site loads. A website that ranks
higher in search results typically receives more clicks and engagement. If a website is poorly
optimized, it might not show up at all, even when users search for relevant terms like
“martial arts near me” or “self-defense classes in [location]”.

Performance in this context doesn’t just mean speed; it also includes how well the site
meets user intent, how secure it is, and how easy it is to use across devices. Sites that are
mobile-friendly and fast-loading tend to get better rankings. (kijol)

Impact of Search Engine Visibility on Performance

When it comes to performance, search engines influence several aspects of a website:

 Traffic: Higher rankings mean more clicks. According to research by Backlinko, the first result on Google
gets roughly 27.6% of all clicks.
 Trust and Credibility: Users are more likely to trust websites that appear on the first page of results.
 Engagement: Better visibility often leads to higher user engagement, more sign-ups, and improved
conversion rates. (“Web Development”)

Evidence-Based Techniques to Improve SEO and Site Indexing

To ensure the DoBu Martial Arts website ranks well, a series of SEO strategies must be
implemented. These are based on industry best practices and proven research from search
engine documentation and SEO experts.(W3C)

Keyword Research and Placement

BTEC HN Student Submission and Declaration Form

Issue Date: Jan 2024 Owner: HN QD
DCL1 Public (Unclassified) Version 2.0
Higher Nationals
Search engines need to understand what your pages are about. Using tools like Google
Keyword Planner or Uber Suggest, developers can identify commonly searched terms (like
“karate classes for beginners” or “self-defense for women”). These keywords should be
placed strategically in:

 Page titles
 Meta descriptions
 Headers (H1, H2)
 Body content
 Image alt attributes

But it’s important to use them naturally; keyword stuffing can lead to penalties.

High-Quality, Relevant Content

Search engines prioritize websites that offer valuable, original, and updated content. A blog
section on the DoBu Martial Arts site could cover topics like “Top 5 Benefits of Kickboxing,”
“How Martial Arts Improve Mental Health,” or “Beginner’s Guide to Self-Defense.” This not
only improves SEO but keeps visitors engaged and coming back.

Technical SEO Optimization

Technical SEO ensures search engines can properly crawl and index a website. Key elements
include:

 Clean URL structures (e.g., /martial-arts/kickboxing instead of /paged=123)

 XML Sitemaps to help crawlers navigate
 Robots.txt files to control indexing
 Proper use of header tags for content hierarchy

Fast Load Times and Mobile-Friendliness

Google’s Core Web Vitals assess page speed, interactivity, and visual stability. A website that
loads quickly on all devices, especially mobile, is more likely to rank well. Use:

 Optimised images

BTEC HN Student Submission and Declaration Form

Issue Date: Jan 2024 Owner: HN QD
DCL1 Public (Unclassified) Version 2.0
Higher Nationals
 Browser caching
 Minified CSS and JavaScript
 Responsive design (via frameworks like Bootstrap or Tailwind CSS)

Secure HTTPS Connection

Security is a ranking factor. An SSL certificate (which enables HTTPS) encrypts data between
the server and browser. Visitors also feel more confident when they see a padlock in the
address bar.

Backlinks and Domain Authority

Backlinks (when other trusted websites link to yours) signal credibility. Earning links through
guest posts, local directories, or collaborations increases the authority and ranking potential
of your site.

BTEC HN Student Submission and Declaration Form

Issue Date: Jan 2024 Owner: HN QD
DCL1 Public (Unclassified) Version 2.0
Higher Nationals

Tools That Support SEO

Several tools can help maintain and monitor SEO performance:

 Google Search Console – For monitoring indexing, performance reports, and fixing issues.
 Google Analytics – To track user behaviors and identify areas for improvement.
 Screaming Frog – A site crawler that checks for broken links, missing metadata, etc.
 Yoast SEO (for WordPress) – A plugin that provides real-time SEO suggestions.

Case Example: A Local Gym Website

Let’s say DoBu Martial Arts implements a responsive design, uses keywords like “karate
classes in Birmingham,” regularly updates its blog, and earns backlinks from local sports

BTEC HN Student Submission and Declaration Form

Issue Date: Jan 2024 Owner: HN QD
DCL1 Public (Unclassified) Version 2.0
Higher Nationals
blogs. Over time, the site moves from page three to page one of Google results. As a result,
monthly traffic increases by 40%, and class sign-ups grow. This shows how SEO isn’t just a
technical task—it directly impacts business outcomes. (Martín Llamas Nistal et al.)

LO2: Categories Website Technologies, Tools, and Software Used to

Develop Websites.
Developing a modern website involves a combination of technologies, tools, and software,
each serving a specific purpose in the overall workflow, from initial planning to final
deployment. These tools can be broadly categorized into front-end technologies, back-end
technologies, development tools, design tools, and web hosting services. Understanding
each category helps developers select the right tools for building functional, efficient, and
visually appealing websites.

Front-End Technologies
The front end is the part of the website that users interact with directly. It includes
languages and libraries used to structure and style content. Key technologies include:

 HTML (Hypertext Markup Language): The backbone of any website, used for structuring content.
 CSS (Cascading Style Sheets): Used to control layout, colors, fonts, and responsive design.
 JavaScript: Adds interactivity such as form validation, sliders, or dynamic content.
 Frameworks and Libraries: These include React.js, Vue.js, or Bootstrap for building faster and more
scalable user interfaces.

Development Tools
Development tools are essential for writing, testing, and managing code efficiently. Code
editors like Visual Studio Code, Sublime Text, and Atom provide a user-friendly

interface for writing and editing code, often with features like syntax highlighting and
debugging support. To keep track of code changes and enable team collaboration, version
control systems such as Git, along with platforms like GitHub or GitLab, are widely

used. Additionally, developers use task runners and build tools such as Webpack,

BTEC HN Student Submission and Declaration Form

Issue Date: Jan 2024 Owner: HN QD
DCL1 Public (Unclassified) Version 2.0
Higher Nationals
Gulp, and npm scripts to automate tasks like file bundling, code compilation, and

optimization.

Design and Prototyping Tools

Design and prototyping tools play a crucial role in the early stages of website development,
helping designers and developers visualize the website before any code is written. Figma
and Adobe XD are commonly used for creating wireframes, mockups, and interactive UI
prototypes. These tools allow designers to collaborate in real-time and ensure that the
website aligns with user needs and client expectations. For graphic design, tools like Canva
and Adobe Photoshop are used to create visual assets such as icons, logos, and images,
ensuring the site has a polished and cohesive look. (Oswald Campesato and Nilson)

Content Management Systems (CMS)

For developers and clients who want to manage websites without needing to write code,
Content Management Systems (CMS) are highly useful. Popular CMS platforms like
WordPress, Wix, and Drupal offer a user-friendly interface, pre-designed templates, and
a wide range of plugins. These systems allow for rapid website development and make it
easier to update content, manage users, and add new functionality without technical
expertise.

Web Hosting and Deployment Tools

Once a website is built, it needs to be hosted online so users can access it. There are various
web hosting and deployment platforms available depending on the type and
complexity of the site. For simple static websites, GitHub Pages is a popular, free option.
For more dynamic sites and front-end frameworks, platforms like Netlify and Vencel
provide fast, secure, and scalable deployment options. Traditional hosting platforms like
Bluehost, GoDaddy, and SiteGround offer cPanel-based hosting, which is ideal for

BTEC HN Student Submission and Declaration Form

Issue Date: Jan 2024 Owner: HN QD
DCL1 Public (Unclassified) Version 2.0
Higher Nationals
CMS-based sites like WordPress. For enterprise-grade and scalable solutions, cloud services
such as Amazon Web Services (AWS), Google Cloud Platform, and Microsoft Azure
provide robust hosting infrastructure.

P3 Discuss the capabilities and relationships between front-end and

back-end website technologies and explain how they relate to
presentation and application layers in detail

Front-End and Back-End Technologies: An Overview

In website development, front-end and back-end technologies serve different but
interconnected purposes. Together, they ensure a website not only looks good but also
functions properly behind the scenes. The front end focuses on the visual and interactive
parts of a website the content users see and interact with while the back end manages data,
user authentication, server-side logic, and database communication. These two layers work
together to deliver a seamless web experience.

Capabilities of Front-End Technologies

Front-end technologies are responsible for the presentation layer, which includes everything
users interact with directly on their browsers. The main technologies used here include:

 HTML (Hypertext Markup Language) – Defines the structure and content of web pages.
 CSS (Cascading Style Sheets) – Controls the design, layout, and aesthetics of the page.
 JavaScript – Enables interactivity such as form validation, animations, and dynamic content updates.

Modern front-end development also uses frameworks and libraries like React, Vue.js, and
Angular to build responsive, interactive user interfaces more efficiently. These technologies
ensure that the user interface is visually appealing, accessible, and functional across devices
and browsers.

Capabilities of Back-End Technologies

BTEC HN Student Submission and Declaration Form

Issue Date: Jan 2024 Owner: HN QD
DCL1 Public (Unclassified) Version 2.0
Higher Nationals
The back-end handles the application layer, focusing on functionality that supports what
happens behind the scenes. It manages server operations, databases, APIs, and business
logic. Core technologies include:

Back-end developers also create APIs (Application Programming Interfaces) to allow front-
end applications to securely communicate with the server and database.

 Programming languages such as PHP, Python, Ruby, Java, and Node.js.

 Database systems like MySQL, MongoDB, and PostgreSQL to store user data, content, and transactions.
 Server software such as Apache, Nginx, or IIS, which processes requests and delivers the correct
response to the browser. (Content Management Systems)

The Relationship Between Front-End and Back-End

The front-end and back-end work together through communication protocols, typically
HTTP/HTTPS, using APIs or RESTful services. For example, when a user fills out a contact
form on the front end, the information is sent to the back end for processing and storage.
The back end then responds with confirmation or error messages that the front-end
displays.

Connection to Presentation and Application Layers

In the layered architecture of web development:

 The presentation layer is managed by front-end technologies. It determines how information is

presented to users, handles interactions, and ensures accessibility.
 The application layer is handled by back-end technologies. It processes logic, performs calculations,
accesses databases, and handles business rules.

P4 Discuss the differences between online website creation tools

and custom-built sites about design flexibility, performance,
functionality, User Experience (UX), and User Interface (UI) in
detail.

BTEC HN Student Submission and Declaration Form

Issue Date: Jan 2024 Owner: HN QD
DCL1 Public (Unclassified) Version 2.0
Higher Nationals
Website builders or custom-built websites are the two primary options for organizations
and developers in web development. Each solution has pros and cons in terms of design
freedom, performance, functionality, UX, and UI. The project's goals, technical skills, and
budget determine the choice.
Design Flexibility
Web design is easy and fast with Wix, Squarespace, and Weebly's pre-designed templates
and drag-and-drop interfaces. This ease reduces design flexibility. Template structure and
specified layout options may limit complex changes. But custom-built websites allow you
design everything from scratch. Developers can customize the website's style and
functionality to meet the business's objectives, creating a distinctive and brand-aligned
visual identity.

Performance
Website builders commonly use shared servers, which slows loading and performance.
Since these platforms serve many users at once, they may include extra code or capabilities
that a website doesn't employ, slowing performance. However, custom-built sites can use
only the necessary features and lightweight code to improve performance. Developers can
choose hosting, cache, and optimize server responses.
Functionality
Functionality is superior on custom websites. Developers may incorporate complex features
like booking systems, user dashboards, e-commerce platforms, APIs, and more. Time,
funding, and development abilities are the only limits. Online website builders include useful
plugins and tools, but have limits. User reliance on platform tools may prevent elaborate or
highly specialized functionality.
UX Experience
Website builders are user-friendly and optimized for a good user experience out of the box.
UX may be general and not personalized to the target audience's demands. Limited
flexibility over interactivity and bespoke workflows can hamper engagement. UX best
practices can be used to customize websites based on user research and behavior analysis.

BTEC HN Student Submission and Declaration Form

Issue Date: Jan 2024 Owner: HN QD
DCL1 Public (Unclassified) Version 2.0
Higher Nationals
Navigation, accessibility, responsiveness, and content organization all need to be tailored to
user demands for a more natural and enjoyable experience.
A user interface
Website builders have limited UI layouts and style possibilities. Although well-designed,
some themes may look like other websites using the same platform. A custom websites let
designers develop a distinctive UI that matches the brand's identity and boosts usability.
Every button, icon, color scheme, and layout may be customized for business and user
needs. (Hokanson et al.)

M3. Analyze a range of tools and techniques available to design and

develop a custom-built website. in detail
Creating a custom-built website involves using a wide range of tools and techniques that
help streamline the design, development, and deployment process. Unlike template-based
website builders, custom-built websites require more control over both the front-end and
back-end, offering full flexibility, scalability, and unique branding. This analysis explores the
key tools and techniques developers use to create high-quality, fully customized websites.

Front-End Development Tools and Techniques

HTML, CSS, and JavaScript

At the heart of any website, front-end technologies like HTML (structure), CSS (styling), and
JavaScript (interactivity) are essential. Developers use these to build responsive and
engaging user interfaces. Techniques such as semantic HTML5, CSS Grid/Flexbox, and DOM
manipulation with JavaScript help create modern layouts and user experiences.

Frameworks and Libraries

To accelerate development, many developers use frameworks and libraries:

 Bootstrap is a CSS framework for responsive and mobile-first design.

BTEC HN Student Submission and Declaration Form

Issue Date: Jan 2024 Owner: HN QD
DCL1 Public (Unclassified) Version 2.0
Higher Nationals
 React.js is a JavaScript library for building dynamic user interfaces using reusable components.
 Vue.js and Angular offer reactive interfaces and robust data binding.

Back-End Development Tools and Techniques

Programming Languages

The back-end handles logic, database interaction, and server control. Common languages
include:

 PHP is widely used for web applications, especially with CMSs like WordPress.
 Node.js uses JavaScript on the server-side, ideal for real-time applications.
 Python is known for its clean syntax, used with frameworks like Django and Flask.

Web Frameworks

Frameworks simplify the development of secure, scalable applications:

 Express.js (Node.js) – a minimalist framework for APIs and web applications.

 Laravel (PHP) – elegant syntax, includes routing, authentication, and templating.
 Django (Python) – follows the “batteries-included” approach for rapid development.

Database Management Tools

Custom websites often require dynamic content and user data storage. Popular databases
include:

 MySQL and PostgreSQL relational databases are ideal for structured data.
 MongoDB a NoSQL database for handling large volumes of unstructured data. Developers use SQL or
ORMs (Object-Relational Mappers) to interact with databases efficiently.

Design and Prototyping Tools

Before development begins, UI/UX designers create wireframes and mockups using tools
like:

BTEC HN Student Submission and Declaration Form

Issue Date: Jan 2024 Owner: HN QD
DCL1 Public (Unclassified) Version 2.0
Higher Nationals
 Figma cloud-based, collaborative design tool for UI/UX.
 Adobe XD is powerful for prototyping and interaction design.
 Canva or Photoshop for custom graphics, icons, and branding.

Version Control and Collaboration Tools

Git is the industry standard for version control. Developers use platforms like:

These tools allow teams to collaborate, track changes, and manage project versions
efficiently.

 GitHub
 GitLab
 Bitbucket

Deployment and Hosting Tools

After development, websites must be deployed and hosted, Developers also use FTP/SFTP
or CI/CD pipelines to automate deployment processes.

 Netlify and Vencel are great for modern static or JAM Stack sites.
 cPanel hosting (e.g., Bluehost, HostGator) – good for PHP-based sites.
 Cloud Platforms like AWS, Google Cloud, and Azure offer scalable hosting with CI/CD support.

Testing and Quality Assurance Tools

Testing is crucial for identifying bugs and improving performance:

 Chrome Dev Tools’ browser-based tool for debugging front-end code.

 Jest, Mocha, and Selenium are used for unit and end-to-end testing.
 Lighthouse checks performance, accessibility, SEO, and best practices.

LO3 Utilize website technologies, tools, and techniques with good

design principles to create a multipage website.

BTEC HN Student Submission and Declaration Form

Issue Date: Jan 2024 Owner: HN QD
DCL1 Public (Unclassified) Version 2.0
Higher Nationals
Project Overview:
A multi-page website was developed for a fictional business (e.g., DoBu Martial Arts) using
modern web development technologies. The website includes pages like:

Each page follows a consistent design theme, a responsive layout, and includes interactive
elements.
 Home
 About Us
 Classes
 Pricing
 Contact

Technologies and Tools Used:

1. HTML5

Used to structure all web pages. Semantic elements like <header>, <nav>, <section>, and
<footer> ensure good accessibility and SEO performance.

2. CSS3 and Flexbox/Grid

Used for responsive layout design. Flexbox and Grid systems were implemented for
consistent alignment and adaptability to different screen sizes.

3. JavaScript

Used to add interactivity such as form validation, dynamic navigation, and popups. Ensures
user-friendly features.

4. Bootstrap (or Tailwind CSS)

Frameworks like Bootstrap were optionally used for responsive design, UI components (like
modals and carousels), and grid layout systems.

5. Visual Studio Code

Chosen as the code editor for its powerful extensions, live server preview, and Git
integration.

6. Version Control (Git + GitHub)

BTEC HN Student Submission and Declaration Form

Issue Date: Jan 2024 Owner: HN QD
DCL1 Public (Unclassified) Version 2.0
Higher Nationals
Git was used to track changes. GitHub was used to back up the project and collaborate with
others if needed.

BTEC HN Student Submission and Declaration Form

Issue Date: Jan 2024 Owner: HN QD
DCL1 Public (Unclassified) Version 2.0
Higher Nationals

BTEC HN Student Submission and Declaration Form

Issue Date: Jan 2024 Owner: HN QD
DCL1 Public (Unclassified) Version 2.0
Higher Nationals

P5 Create a design document for a branded, multipage website,

supported with medium fidelity wireframes and a full set of client
and user requirements.

client Requirements (Functional & Non-Functional)

Functional Requirements:
1. Home page introducing the brand and facility.
2. Class schedule and descriptions for each martial arts course.
3. Pricing and membership plans.
4. Account registration and login system (for managing memberships).
5. Contact form and location map.
6. Integration of social media feeds or links.
7. Blog or community forum (optional).
Non-Functional Requirements:

 Must load in under 3 seconds.

 Mobile and tablet responsive.
 Accessible for users with disabilities (e.g. screen reader compatible).
 Follow SEO best practices.
 Modern, martial arts-themed design with strong branding.
 Secure handling of user data via HTTPS.
User Requirements:

User Type Needs

New Visitor Understand the services offered, view class schedules, and pricing.

Returning Member Log in to manage their account or check upcoming classes.

Mobile User Easily browse all content on a phone/tablet.

BTEC HN Student Submission and Declaration Form

Issue Date: Jan 2024 Owner: HN QD
DCL1 Public (Unclassified) Version 2.0
Higher Nationals
Admin (Internal) Add/edit class content, manage user queries.

Page Structure & Content Plan:

Page Content Summary

Home Welcome message, brand imagery, navigation bar, call to action.

About Gym story, instructors’ profiles, facility photos.

Classes Martial arts class types, time schedules, and instructor details.

Pricing Plan details, discounts, and online registration link.

Contact Contact form, Google map, business hours, social media icons.

Account Register, Login, Dashboard (only visible when logged in).

Branding Guidelines:

 Primary Color: Deep red (#8B0000)

 Secondary Color: Black and white accents for clean contrast

 Fonts:

 Headings: Montserrat Bold

 Body: Open Sans Regular

 Imagery Style: High-energy photos, action shots of martial artists

 Logo: A stylized dragon/dojo symbol to reflect strength and tradition

Navigation Layout:

BTEC HN Student Submission and Declaration Form

Issue Date: Jan 2024 Owner: HN QD
DCL1 Public (Unclassified) Version 2.0
Higher Nationals
Top navigation bar on all pages with:

 Logo (top left)

 Links to: Home | About | Classes | Pricing | Contact | Login/Register

Footer on all pages with:

 Social media icons

 Address

 Newsletter signup

Medium Fidelity Wireframes:

I can generate visual wireframes for each page if you'd like, just say the word.
Each wireframe will show:
 Header and footer positions
 Placeholder sections for images, text, and buttons
 Layouts for mobile and desktop views
Technologies to be Used:

 Frontend: HTML5, CSS3, JavaScript

 Optional Frameworks: Bootstrap or Tailwind CSS

 Deployment: GitHub Pages or Netlify for hosting

 Optional Backend: PHP or Node.js for login/membership

P6: Producing a Branded, Multi-Page Website Using the Design

Document.
The next phase was to establish a multipage, branded website for DoBu Martial Arts using
the previously developed design document, which contained wireframes, technical
information, and client and user requirements. To guarantee a polished, user-friendly, and

BTEC HN Student Submission and Declaration Form

Issue Date: Jan 2024 Owner: HN QD
DCL1 Public (Unclassified) Version 2.0
Higher Nationals
accessible website, its development adhered to best practices for design principles,
standards, and web accessibility rules.

Following Appropriate Principles, Standards, and Guidelines

Design Principles

 Consistency: Uniform design elements like fonts, colors, and button styles were used across all pages.
 Accessibility: The website was built following the Web Content Accessibility Guidelines (WCAG 2.1),
using alt text for images, sufficient color contrast, and keyboard navigability.

 Mobile Responsiveness: A mobile-first approach ensured that the site adapts well to
various screen sizes.

 Visual Hierarchy: Clear headings, subheadings, and intuitive navigation were used to
guide users through the site.

 Brand Identity: The site incorporated DoBu Martial Arts' brand colors (black, white, and red), logo, and
overall theme related to martial arts energy and discipline.

Standards

 HTML5 and CSS3: The latest standards for structure and styling were implemented.
 SEO Best Practices: Meta tags, header structures (H1, H2, H3), and semantic HTML elements were used
to improve search engine visibility.

 Security Standards: HTTPS was enforced, and proper handling of forms was
implemented to prevent vulnerabilities.

Guidelines

 Navigation: Simple, user-friendly navigation with a clear menu across all pages.

 Load Time Optimization: Images were compressed, and CSS/JS files were minified for
faster load times.

 Cross-Browser Compatibility: The website was tested on Chrome, Firefox, Safari, and Edge.

BTEC HN Student Submission and Declaration Form

Issue Date: Jan 2024 Owner: HN QD
DCL1 Public (Unclassified) Version 2.0
Higher Nationals

Website Structure and Realistic Content

The website consisted of the following main pages:

Page Purpose

Home Welcoming users, showcasing key features, displaying a hero banner,

and call-to-action buttons

About Us Background of DoBu Martial Arts, mission, vision, and instructors'

profiles

Martial Arts Information about different martial arts offered: Karate, Judo,
Classes Taekwondo, etc.

Membership Clear details about class schedules, membership tiers, and pricing
Plans

Account Page Users can register, log in, and manage their memberships

Forum / Social Integration of community features like discussion forums and social
Page media links

Contact Us Contact form, Google Maps integration, and business contact details

Development Tools and Technologies Used

 Frontend: HTML5, CSS3 (Flexbox and Grid for layout), JavaScript

 Backend (Optional): Node.js (for handling registration forms and user login simulation)

BTEC HN Student Submission and Declaration Form

Issue Date: Jan 2024 Owner: HN QD
DCL1 Public (Unclassified) Version 2.0
Higher Nationals
 Frameworks: Bootstrap 5 for responsiveness and pre-built components

 Content: Content was curated with realistic, research-based descriptions of martial arts
styles and membership benefits.

 Hosting: Website files were deployed to GitHub Pages for accessibility.

Example Key Features Built

 Hero Section: Eye-catching banner on the homepage with action shots and a "Join Now"
button.

 Interactive Classes Page: Expandable sections with class descriptions and schedules.

 User Account Creation: Simple registration form capturing name, email, and password.

 Forum Integration: Embedded a simple commenting system for community interaction.

 Responsive Navbar: Collapses into a hamburger menu on mobile devices.

 SEO Elements: Meta titles, meta descriptions, and schema markup for key pages.

M4: Justification of the Multipage Website Implementation Against

the Design Document.
The development of the DoBu Martial Arts multipage website was directly informed by the
approved design document, ensuring that all client and user requirements were met. Every
decision made during the website’s production was carefully aligned with the original design
choices and broader web development best practices.

Structure and Page Layouts

Design Document Reference:

The wireframes outlined a clear multipage structure, including Home, About, Classes,
Membership Plans, Forum, and Contact pages.

BTEC HN Student Submission and Declaration Form

Issue Date: Jan 2024 Owner: HN QD
DCL1 Public (Unclassified) Version 2.0
Higher Nationals
Implementation Decision:
Each page was developed exactly as planned, using separate HTML files to ensure easy
navigation and logical flow. The layout followed the wireframes’ blueprint: hero banners,
sections for services, testimonials, call-to-action buttons, and footer details were faithfully
recreated. (Hokanson et al.)

Justification:
By adhering closely to the wireframes, the site maintained consistency and user
expectations were met, improving usability and user satisfaction.

2. Branding and Visual Identity

Design Document Reference:

The branding guide specified the use of a black, red, and white color palette, with bold
typography to reflect the strength and discipline associated with martial arts.

Implementation Decision:
CSS variables were used to maintain brand colors across all pages. The font choices and logo
placement matched the design guidelines, ensuring visual consistency.

Justification:
Following the branding guide helped reinforce the identity of DoBu Martial Arts, providing a
strong, memorable brand presence across the site.

User Experience (UX) and Navigation

Design Document Reference:

The design document emphasized simple navigation, quick access to membership details,
and visible contact information.

BTEC HN Student Submission and Declaration Form

Issue Date: Jan 2024 Owner: HN QD
DCL1 Public (Unclassified) Version 2.0
Higher Nationals
Implementation Decision:
A sticky navigation bar was implemented for easy access to all pages from anywhere on the
website. Key links such as "Join Now" and "Contact Us" were prominently displayed.

Justification:
This decision improved the overall user experience by making the website intuitive, reducing
the number of clicks needed to find information, and guiding users smoothly towards
conversion points.

4. Responsive and Mobile-First Design

Design Document Reference:

The medium-fidelity wireframes included mobile views, highlighting the importance of
mobile responsiveness.

Implementation Decision:
The site was developed using responsive design principles, with Bootstrap 5 components
and custom media queries to ensure a seamless experience on mobile phones and tablets.

Justification:
Ensuring the website was mobile-friendly not only met user expectations but also improved
SEO ranking, as mobile responsiveness is a key factor in Google’s ranking algorithm.

Justification:
Using these reliable and modern technologies ensured a fast, secure, and scalable website
that could be easily maintained and upgraded over time.

LO4 Create and use a Test Plan to review the performance and
design of a multipage website.
Purpose of the Test Plan

The purpose of the Test Plan is to:

BTEC HN Student Submission and Declaration Form

Issue Date: Jan 2024 Owner: HN QD
DCL1 Public (Unclassified) Version 2.0
Higher Nationals
 Ensure that all website features and pages work correctly.
 Validate that the design matches the approved design document and wireframes.
 Test the performance across different browsers and devices.
 Identify and correct any bugs or design inconsistencies.
 Guarantee a good user experience (UX) and professional user interface (UI).

Test Plan Table

Test Case Test Steps Test Data Expected Actual Status
Result Result
1. Home Navigate to Home Website URL Home page Successfull Pass
Page page loads y loaded
Loading quickly and
displays all
sections
2. Click each Home, About, Each link All links Pass
Navigation navigation link Classes, takes user worked
Menu Membership, to correct
Forum, page
Contact
3. Open site on Mobile phone, Website Responsive Pass
Responsive mobile/tablet tablet adjusts and user-
Design devices layout for friendly
smaller
screens
4. Button Click "Join Now" Buttons on Buttons Buttons Pass
Functionalit and "Contact Us" Home and redirect to functional
y buttons Membership correct
pages forms or
pages
5. Form Submit the Contact Blank/ Error Correct Pass
Validation form with incorrect form message error
incomplete/incorrec input appears for messages
t data invalid displayed
fields
6. Cross- Access the website Chrome, Website No issues Pass

BTEC HN Student Submission and Declaration Form

Issue Date: Jan 2024 Owner: HN QD
DCL1 Public (Unclassified) Version 2.0
Higher Nationals
Browser from different Firefox, Edge, displays across
Compatibilit browsers Safari and works browsers
y consistentl
y
7. Page Load Test page load times GTMetrix, Page load Load time Pass
Speed using speed testing Google time < 3 ~2.1
tools PageSpeed seconds seconds
Insights
8. Link Click all hyperlinks Internal and Links work No broken Pass
Testing across all pages external links correctly links
without
errors
9. Content Review text, All site content Content Accurate Pass
Accuracy headings, images matches and
design professiona
document l
and is
error-free
10. Security Check for HTTPS SSL Certificate Website HTTPS is Pass
Testing and basic protection connection active
should be
secure

Testing Tools Used

 Browser Developer Tools (Chrome DevTools, Firefox Developer Tools)
 Repositor (for responsive testing)
 Tetrix and Google Page Speed Insights (for speed and performance testing)
 W3C Validator (for HTML/CSS code validation)
 SSL Checker (for HTTPS security check)

P7: Create a Suitable Test Plan for Reviewing Functionality and

Performance
A comprehensive Test Plan has been designed in order to guarantee that the multipage
website for DoBu Martial Arts will fulfill the requirements of both the technical and user
communities. Testing each major performance area in a methodical manner is the primary
focus of the plan. These key performance areas include usability, design consistency, speed,

BTEC HN Student Submission and Declaration Form

Issue Date: Jan 2024 Owner: HN QD
DCL1 Public (Unclassified) Version 2.0
Higher Nationals
and security requirements. During testing, possible problems are discovered at an early
stage, and a website is guaranteed to be professional and fully functional before it is made
public.

Key Performance Areas to Review

Functionality Testing

 Navigation: Test all internal page links, navigation menus, and buttons.
 Forms: Validate contact forms and other submission processes.
 Hyperlinks: Verify that internal and external links direct users correctly.
 Interactive Elements: Test carousels, dropdown menus, and any JavaScript components.

Compatibility Testing

 Cross-browser Testing: Ensure that the website works properly across browsers like Chrome, Firefox,
Safari, and Edge.
 Device Testing: Validate the website’s responsiveness on mobile phones, tablets, and desktops.

Performance Testing

 Page Load Time: Measure how quickly pages load (ideally under 3 seconds).
 Image Optimization: Check if images are compressed for faster loading without losing quality.
 Server Response Time: Monitor server response to user requests.

Usability Testing and Security Testing

 Ease of Navigation: Ensure users can easily find information.

 Content Readability: Review font sizes, contrast, and spacing for better readability.
 Accessibility Compliance: Check for alternative text on images and keyboard navigation support.
 SSL Certificate: Confirm that the website uses HTTPS encryption.
 Form Protection: Test forms for basic spam protection (e.g., CAPTCHA, honeypots).

Detailed Test Plan Table

Test Case Test Steps Expected Result Actual Status

BTEC HN Student Submission and Declaration Form

Issue Date: Jan 2024 Owner: HN QD
DCL1 Public (Unclassified) Version 2.0
Higher Nationals
Result

Home Page Loading Navigate to the Home Page loads within 3

page seconds

Navigation Menu Click all navigation Correct pages open

menu items without delay

Contact Form Fill out and submit the Confirmation

Submission form message displayed

Mobile View Open the site on Layout adjusts

Responsiveness various mobile devices properly

Cross-browser Open the site in Site appears

Compatibility Chrome, Firefox, Safari, consistent
or Edge

Page Load Speed Use Tetrix and Google Score of 80 %+

Test Page Speed Insights performance

SSL Certificate Check the website HTTPS is active and

Validation connection secure

Accessibility Test screen reader and Site remains

Features keyboard-only functional and
navigation accessible

Broken Links Check Test all internal and All links are valid and
external links working

Image Optimization Review the size and Optimized without

Review loading times of images affecting quality

BTEC HN Student Submission and Declaration Form

Issue Date: Jan 2024 Owner: HN QD
DCL1 Public (Unclassified) Version 2.0
Higher Nationals
M5: Analyze the Quality Assurance (QA) Process and its
Implementation During Website Design and Development.

Any web development project must include quality assurance (QA) since it guarantees that
the resulting website satisfies high criteria of performance, usability, and usefulness. Strong
QA was applied consistently in the design and production phases of the DoBu Martial Arts
multipage website. This guaranteed the site's dependability, simplicity, and public usage
readyness.

Understanding the QA Process

In web development, the QA method is a set of organized steps used to make sure that a
website meets certain criteria. Its main goal is not only to find flaws but also to stop them
from happening. QA makes the development process better generally, cuts down on
mistakes, and makes the user experience better. To keep quality high from beginning to
end, it requires early planning, thorough testing, proof against standards, and ongoing
feedback loops.
QA Implementation During the Design Stage
QA began working on the project during the planning stage by collecting and validating
requirements. All of the user's and client's needs were written down and looked over to
make sure there was no confusion later. Then, wireframes and mockups were made and
shown to stakeholders to get their comments. The design team was able to find and fix any
user problems with this iterative review before the development began. A big deal was
making sure that the website could be used by people with disabilities. The designs were
made in line with the WCAG 2.1 accessibility standards. Dealing with possible issues early on
made the design process go more easily and laid a solid base for development.
QA Implementation During the Development Stage
When work on the project started, QA tasks got even more specific. To keep coding
standards high, code reviews were done regularly after big feature implementations. Before

BTEC HN Student Submission and Declaration Form

Issue Date: Jan 2024 Owner: HN QD
DCL1 Public (Unclassified) Version 2.0
Higher Nationals
being added to the live site, each feature, from navigation menus to contact forms, was
tried on its own. Manual functional testing helped find bugs early on, and automatic tools
like the W3C Validator made sure that the HTML and CSS code were clean and free of bugs.
Using Browser Stack, cross-browser and mobile testing was done to make sure that the
website worked the same way on all devices and computers. Performance testing tools,
such as Google Page Speed Insights and Tetrix, were also used to keep an eye on and
improve opening times, making sure that users had a good experience.
Testing for Security and Optimization
As an important part of the QA process, security checks were done. SSL certification was
used to protect the website and ensure that data transfer was safe. Spam bots were used to
test the contact forms to make sure they wouldn't be abused. Also, images were
compressed, CSS and JavaScript files were made smaller, and server calls that weren't
needed were cut down. These steps greatly sped up the time it took for pages to load and
helped the site's SEO results.

Review and Outcomes

The attempts to improve quality led to several good results. Few changes were asked for by
the client because any problems were found and fixed early on. The website did very well on
speed and performance tests, meaning it loaded quickly and was easy to use. Because it
used responsive design, the site worked perfectly on phones, laptops, and computers.
Security steps also kept user data safe and increased trust among users. Overall, the quality
assurance method made the website much more reliable, easy to use, and fast.

The code of the website that I developed

BTEC HN Student Submission and Declaration Form

Issue Date: Jan 2024 Owner: HN QD
DCL1 Public (Unclassified) Version 2.0
Higher Nationals

D1: Justification of Technologies, Management Services, Tools, and

Software Chosen for a Custom-Built Website.
When building a custom multipage website, technologies, services, tools, and software must
match project goals, customer demands, scaling needs, and industry standards. Every
technological and tool choice for the DoBu Martial Arts website was designed. This made
the website fast, trustworthy, safe, and attractive.
Selected front-end technologies
HTML5, CSS3, and JavaScript were the key front-end tools. HTML5 rendered the website's

BTEC HN Student Submission and Declaration Form

Issue Date: Jan 2024 Owner: HN QD
DCL1 Public (Unclassified) Version 2.0
Higher Nationals
content meaningful and structured. CSS3 enabled styled designs, animations, and flexible
layouts. The site looked good and worked properly on mobile devices. Dynamic menus and
smooth scrolling were added using JavaScript, improving the user experience (UX).
Back-end tech
This project focused on creating a front-end, multipage website, although PHP was
considered for server-side processing like form handling because it works well with most
hosting systems and is appropriate for small to medium-sized websites. PHP's minimal size,
open source, and support make it a good choice.
Some online hosting and administration services
Hosting was done with Bluehost or SiteGround’s cPanel. These services include reliable
uptime, easy domain control, email hosting, automatic backups, and SSL certificates. They
use PHP and MySQL, so they can add functionality later. (Chapman)
Managing domain names
Domain name servicing was provided by GoDaddy, a trusted firm known for its security,
administration flexibility, and customer support. For owner privacy, WHOIS protects the
name.
Content delivery network (CDN)
Cloudflare CDN was chosen for global data speed. It reduces server strain, speeds up
webpages, and protects against DDoS attacks.
Tool and computer set. We used code editors.
The major code tool was Visual Studio Code. Smart code completion, syntax highlighting, Git
integration, and many add-ons make it an excellent web development tool.
Changing Control
Git and GitHub tracked versions. This made it easy to track changes, reverse mistakes, and
collaborate in a fast, organized development process.
Tools for Design
Figma was utilized for wireframes and visuals. This cloud-based technology allowed real-
time collaboration, making it easy to display clients' designs and collect feedback.

BTEC HN Student Submission and Declaration Form

Issue Date: Jan 2024 Owner: HN QD
DCL1 Public (Unclassified) Version 2.0
Higher Nationals
Testing and Validation Tools
The website was tested with Google Page Speed Insights and Metrix to ensure speed and
accuracy. To ensure web standards compliance, the W3C Validator examined HTML and CSS.
Website responsiveness and compatibility with browser Stack were tested on various
browsers and devices.

Category Name Purpose

Front-End HTML5 Structuring content with semantic,

Technology modern web standards.

Front-End CSS3 Styling the website with layouts,

Technology responsiveness, and animations.

Front-End JavaScript Adding interactivity, like dynamic menus

Technology and smooth scrolling.

Back-End PHP Handling server-side processes (if

Technology needed, e.g., forms).

Hosting Service cPanel Hosting (e.g., Providing server space, domain

Bluehost, SiteGround) management, SSL, and backups.

Domain GoDaddy Registering and managing the domain

Management name securely.

Content Delivery Cloudflare CDN Speeding up website load time and

Network enhancing security against attacks.

Code Editor Visual Studio Code Writing, editing, and managing website

BTEC HN Student Submission and Declaration Form

Issue Date: Jan 2024 Owner: HN QD
DCL1 Public (Unclassified) Version 2.0
Higher Nationals
code efficiently.

Version Control Git + GitHub Tracking code changes, collaborating,

Tool and backup/versioning.

Design Tool Figma Creating wireframes and designing the

website's UI/UX.

Testing Tool Google PageSpeed Testing and optimising website

Insights performance and loading speed.

Testing Tool GTMetrix Analysing page load time and

performance issues.

Testing Tool W3C Validator Checking code validity (HTML/CSS) to

ensure it meets web standards.

Browser Testing BrowserStack Testing website appearance across

Tool multiple browsers and devices.

D2 Evaluate the design and development process of the multipage

website against the design document, including any technical
challenges faced.
Initial Planning and Design Alignment
The project began with a detailed design document detailing the multipage website's aims,
structure, and style. A sitemap, medium-fidelity wireframes, client and user requirements,
and brand standards, including color palettes, typography, and iconography, were included.
This document guided website development to stay true to the original idea. In particular,
wireframes helped maintain uniformity across Home, About Us, Services, and Contact
sections.

BTEC HN Student Submission and Declaration Form

Issue Date: Jan 2024 Owner: HN QD
DCL1 Public (Unclassified) Version 2.0
Higher Nationals
Design-based implementation
Visual hierarchy, consistency, responsiveness, and accessibility were used throughout. The
website maintained its modern, clean style with Figma layout mockups and CSS
Flexbox/Grid framework. We followed the design document's color palette and fonts to
maintain brand consistency. Following wireframes, the navigation bar, hero sections, call-to-
action buttons, and footer were designed. Minor changes during development improved
mobile responsiveness and user experience without changing the designs.

A responsive design:
Designing for desktop, tablet, and mobile screen sizes required CSS media queries not in the
wireframes. To make the site seem excellent on all devices took time and modifications.

Web browser compatibility:

Safari and Edge handled CSS animations and layouts differently. For cross-browser testing
using browser Stack, fallback styles were needed for consistency.
Optimize performance:
Large image file sizes initially slowed page load speed. Compressing photos without
sacrificing quality and lazy-loading them was necessary, but not prioritized.
Adaptations and Solutions
To tackle these issues, some design changes were made while maintaining the original goals.
To improve mobile usability, media queries were included. JavaScript improvements
increased contact form interactivity without changing its appearance. Code minification and
image optimization improved performance. These changes were seen as natural
improvements that made the final product more polished, professional, and user-friendly.

D3 Evaluate the results of the Test Plan and the overall success of
the multipage website with recommendations for improvement.
Test Plan Outcomes

BTEC HN Student Submission and Declaration Form

Issue Date: Jan 2024 Owner: HN QD
DCL1 Public (Unclassified) Version 2.0
Higher Nationals
Once the multipage website was completed, a detailed testing phase followed based on the
original test plan. The testing covered all critical areas such as navigation, responsiveness,
functionality of forms, page speed, and browser compatibility. Each test was performed
step-by-step to ensure nothing was overlooked.

The testing revealed that the website’s core functions operated smoothly. Users could easily
navigate through all pages, buttons, and links responded appropriately, and the contact
form provided accurate validation feedback. Mobile responsiveness was also strong, as the
site adapted well across a range of devices from smartphones to tablets without breaking
layouts or usability.

Key Areas of Testing Analysis

 Website Functionality:
All features worked as intended. Buttons linked to the correct pages, forms captured data correctly, and
interactive elements like sliders performed without glitches.
 Performance Speed:
Most pages loaded within an acceptable time frame of 2–3 seconds. However, a few heavier image-based
pages took slightly longer, suggesting opportunities for further optimization.
 Design and Branding Consistency:
The visual appearance remained consistent throughout the site, aligning with the original branding
guidelines. Fonts, color schemes, and spacing were uniform across all pages.
 Mobile Responsiveness:
The site performed well across various screen sizes. Minor adjustments were needed early on to fix text
alignment issues on smaller screens, but these were successfully corrected during the testing phase.
 Browser Compatibility:
Testing across major browsers like Google Chrome, Safari, Firefox, and Microsoft Edge showed that the
site maintained its structure and functionality with minimal visual differences.

Overall Assessment of the Website

The multipage website can be considered highly successful based on the test results. It
meets the client’s needs by offering a clear, user-friendly interface, efficient navigation,

BTEC HN Student Submission and Declaration Form

Issue Date: Jan 2024 Owner: HN QD
DCL1 Public (Unclassified) Version 2.0
Higher Nationals
attractive branding, and strong performance. The website provides a positive user
experience (UX) and fully adheres to modern web design standards.

Recommendations for Improvement

Although the site is functioning well, some improvements could elevate it even further:

 Further Optimization:
Images could be compressed further or converted to more efficient formats like Web to enhance load
times, especially on slower connections.
 Accessibility Improvements:
Adding features such as ARIA labels and improved keyboard navigation would make the site more
accessible to users with disabilities.
 SEO Enhancements:
Although basic SEO practices were applied, more advanced strategies like adding structured data and
improving page speed could help the site rank higher on search engines.
 Advanced Security Measures:
Incorporating HTTPS security headers and spam filters for forms would strengthen the site's protection
against common threats.

Inline - by using the style attribute inside HTML elements

internal - by using a <style> element in the <head> section

External - by using a <link> element to link to an external CSS file

Internal

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

BTEC HN Student Submission and Declaration Form

Issue Date: Jan 2024 Owner: HN QD
DCL1 Public (Unclassified) Version 2.0
Higher Nationals
External index.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

"styles.css":
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}

Website structure
On every page, text and images are arranged in form of grid. Page is divided into three
section. Header, footer, body. Page body is divided into two parts, left and right column.
Content is neatly arranged in between columns.
The navigation of website is very smooth. Home page can be accessed from any of the sub
pages the menu. There are forward and backward arrows to flip between the images.

BTEC HN Student Submission and Declaration Form

Issue Date: Jan 2024 Owner: HN QD
DCL1 Public (Unclassified) Version 2.0
Higher Nationals

BTEC HN Student Submission and Declaration Form

Issue Date: Jan 2024 Owner: HN QD
DCL1 Public (Unclassified) Version 2.0
Higher Nationals

BTEC HN Student Submission and Declaration Form

Issue Date: Jan 2024 Owner: HN QD
DCL1 Public (Unclassified) Version 2.0
Higher Nationals

HTML, CSS, JavaScript, and any other language can be used in execution.
Our business will need a website at some point, no matter how small it is. Simple web tools
are easy to find these days and can help you turn even the smallest idea into a successful
website. You can connect your website to a lot of different social media accounts, such as
Facebook pages, Twitter profiles, YouTube feeds, and PayPal accounts.
To make your own website these days, you can use web design tools that don't skimp on
quality.

These days, there is software on the market called "web authoring tools" that lets us make
websites in the style of desktop publishing.
The scripting languages we use to add features to our websites are many and varied these
days. These help us put in dynamic ads, graphic shows, menu items, and other things. We
have programming languages for both the client side and the server side that help us make
sure that our forms are correct. Scripting languages are things like JavaScript, PHP, Python,
PERL, and more. They've grown a lot because of how the internet has changed as a way to
communicate. I used JavaScript to make sure the forms in MegaShop were correct.

BTEC HN Student Submission and Declaration Form

Issue Date: Jan 2024 Owner: HN QD
DCL1 Public (Unclassified) Version 2.0
Higher Nationals
Web Authoring Tools, Scripting Language, and Markup Language must all be used together
to make a fully live website that looks good and is easy for people to use. Web creation tools
like Google Sites have been used in this case.
It is easy for web developers to do their jobs with scripting languages and web writing tools.
These tools also save developers a lot of time and work. It looks good and professional when
these kinds of tools are used on a website. HTML, XML, XHTML, and other markup
languages are used a lot.
In order to make this website, I used HTML, JavaScript, CSS, PHP, and MySQL.

Works Cited

Brovick, Edgar, et al. Windows 2000 Active Directory. Indianapolis, Ind., New Riders, 2000.

Chapman, Chris. Network Performance and Security. Syngress, 10 Mar. 2016.

Content Management Systems. Emerald Group Publishing, 2006.

Gilmore, Audrey. Services, Marketing and Management. London, Sage Publ, 2003.

Hokanson, Brad, et al. The Design of Learning Experience : Creating the Future of
Educational Technology. Cham, Springer International Publishing, 2015.

Inamdar, Kaustubh, et al. Understanding Session Border Controllers. Cisco Press, 28 Nov.
2018.

kijol. “Introduction to Web Development | Coursera.” Coursera, 2019,

www.coursera.org/learn/web-development.

LISTER. Fundamentals of Operating Systems. Springer Science & Business Media, 29 June
2013.

Martín Llamas Nistal, et al. Computers and Education : Towards a Lifelong Learning Society.
Dordrecht ; New York, Kluwer Academic Publishers, 2003.

Moreb, Mohammed. Design and Implementation of Software Engineering for Modern Web
Applications. IGI Global, 31 July 2024.

BTEC HN Student Submission and Declaration Form

Issue Date: Jan 2024 Owner: HN QD
DCL1 Public (Unclassified) Version 2.0
Higher Nationals
Mozilla. “HTML Basics.” MDN Web Docs, 4 Apr. 2019,
developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics.

National Research Council, et al. Signposts in Cyberspace. National Academies Press, 7 Aug.
2005.

Oswald Campesato, and Kevin Nilson. Web 2.0 Fundamentals: With AJAX, Development
Tools, and Mobile Platforms. Jones & Bartlett Publishers, 17 Feb. 2010.

Roberts, Debra M. The Relationship Protocol. 22 June 2015.

W3C. “Introduction to Web Accessibility.” Web Accessibility Initiative (WAI), 7 Mar. 2024,
www.w3.org/WAI/fundamentals/accessibility-intro/.

W3SCHOOLS. “CSS Tutorial.” W3schools.com, 2019, www.w3schools.com/css/.

W3Schools. “HTML Tutorial.” W3schools.com, 2024, www.w3schools.com/html/.

“Web Development.” GeeksforGeeks, 26 Apr. 2025, www.geeksforgeeks.org/web-

development/.

BTEC HN Student Submission and Declaration Form

Issue Date: Jan 2024 Owner: HN QD
DCL1 Public (Unclassified) Version 2.0
Higher Nationals

BTEC HN Student Submission and Declaration Form

Issue Date: Jan 2024 Owner: HN QD
DCL1 Public (Unclassified) Version 2.0