WEB DESIGN &

DEVELOPMENT
Higher Nationals
Internal verification of assessment decisions – BTEC (RQF)

INTERNAL VERIFICATION – ASSESSMENT DECISIONS

Programme title BTEC Higher National Diploma in Computing

Assessor Internal Verifier

Unit(s) Unit 13: Web Design and Development

Assignment title Malcolm Lismore Photographer’s Website

Student’s name Sajidha Rimzi

List which assessment Pass Merit Distinction

criteria the Assessor
has awarded.
INTERNAL VERIFIER CHECKLIST
Do the assessment criteria
awarded match those shown in the Y/
assignment brief? N

Is the Pass/Merit/Distinction grade

awarded justified by the assessor’s Y/N
comments on the student work?
Has the work been assessed Y/
accurately? N
Is the feedback to the student:
Give details:
• Constructive?
Y/
• Linked to relevant assessment
criteria? N

• Identifying opportunities Y/
for improved performance?
N
• Agreeing actions?

Y/
N
Y/
N

Does the assessment decision need Y/

amending? N
Assessor signature Date
Internal Verifier signature Date
Programme Leader signature
Date
(if required)
 Confirm action completed
Remedial action taken
Give details:

Assessor signature Date

Internal
Date
Verifier
Programme Leader
Date
signature (if

Sajidha Rimzi | Unit 13 : Web Design and Development| Assignment 01

 Higher Nationals - SummativeAssignmentFeedbackForm

Student Name/ID Sajidha Rimzi/E189889

Unit Title Unit 10: Website Design & Development

Assignment Number 1 Assessor

7/9/2024 Date Received 1st
Submission Date
submission
Date Received 2nd
Re-submission Date
submission
Assessor Feedback:
LO1. Explain server technologies and management services associated with hosting and
managing websites.
Pass, Merit & P1 P2 M1 M2 D1
Distinction Descripts
LO2. Categorise website technologies, tools and software used to develop websites.

Pass, Merit & P3 P4 M3 D1

Distinction Descripts

LO3. Utilise website technologies, tools and techniques with good design principles to create a
multipage website.
Pass, Merit & P5 P6 M4 D2
Distinction Descripts

LO4. Create and use a Test Plan to review the performance and design of a multipage website.
Pass, Merit & P7 M5 D3
Distinction Descripts

Grade: Assessor Signature: Date:

Resubmission Feedback:

Grade: Assessor Signature: Date:

Internal Verifier’s Comments:

Signature & Date:

* Please note that grade decisions are provisional. They are only confirmed once internal
and external moderation has taken place and grades decisions have been agreed at the
assessment board.

Sajidha Rimzi | Unit 13 : Web Design and Development| Assignment 01

 Pearson Higher Nationals in
Computing

Web Design &

Development.

Sajidha Rimzi | Unit 13 : Web Design and Development| Assignment 01

 General Guidelines

1. A Cover page or title page – You should always attach a title page to your
assignment. Use previous page as your cover sheet and make sure all the details are
accurately filled.
2. Attach this brief as the first section of your assignment.
3. All the assignments should be prepared using a word processing software.
4. All the assignments should be printed on A4 sized papers. Use single side printing.
5. Allow 1” for top, bottom , right margins and 1.25” for the left margin of each page.

Word Processing Rules

1. The font size should be 12 point, and should be in the style of Time New Roman.
2. Use 1.5 line spacing. Left justify all paragraphs.
3. Ensure that all the headings are consistent in terms of the font size and font style.
4. Use footer function in the word processor to insert Your Name, Subject,
Assignment No, and Page Number on each page. This is useful if individual sheets
become detached for any reason.
5. Use word processing application spell check and grammar check function to help
editing your assignment.

Important Points:

1. It is strictly prohibited to use textboxes to add texts in the assignments, except for the
compulsory information. eg: Figures, tables of comparison etc. Adding text boxes in
the body except for the before mentioned compulsory information will result in
rejection of your work.
2. Carefully check the hand in date and the instructions given in the assignment. Late
submissions will not be accepted.
3. Ensure that you give yourself enough time to complete the assignment by the due date.
4. Excuses of any nature will not be accepted for failure to hand in the work on time.
5. You must take responsibility for managing your own time effectively.
6. If you are unable to hand in your assignment on time and have valid reasons such as
illness, you may apply (in writing) for an extension.
7. Failure to achieve at least PASS criteria will result in a REFERRAL grade .
8. Non-submission of work without valid reasons will lead to an automatic RE FERRAL.
You will then be asked to complete an alternative assignment.
9. If you use other people’s work or ideas in your assignment, reference them properly
using HARVARD referencing system to avoid plagiarism. You have to provide both
in-text citation and a reference list.
10. If you are proven to be guilty of plagiarism or any academic misconduct, your grade
could be reduced to A REFERRAL or at worst you could be expelled from the course.

Sajidha Rimzi | Unit 13 : Web Design and Development| Assignment 01

 Student Declaration

I hereby, declare that I know what plagiarism entails, namely to use another’s work and to
present it as my own without attributing the sources in the correct way. I further understand
what it means to copy another’s work.

1. I know that plagiarism is a punishable offence because it constitutes theft.

2. I understand the plagiarism and copying policy of the Edexcel UK.
3. I know what the consequences will be if I plagiaries or copy another’s work in any of
the assignments for this program.
4. I declare therefore that all work presented by me for every aspects of my program, will
be my own, and where I have made use of another’s work, I will attribute the source in
the correct way.
5. I acknowledge that the attachment of this document signed or not, constitutes a binding
agreement between myself and Edexcel UK.
6. I understand that my assignment will not be considered as submitted if this document
is not attached to the attached.

Student’s Signature:[email protected] Date: 07/09/2024

Sajidha Rimzi | Unit 13 : Web Design and Development| Assignment 01

 Student Name /ID Number Sajidha Rimzi/E189889

Unit Number and Title Unit 10- Web Design and Development

Academic Year 2023/2024

Unit Tutor Ms. Dharshani

Assignment Title Malcolm Lismore Photographer’s Website

Issue Date

Submission Date 7/9/2024

IV Name & Date

Submission Format:

Sajidha Rimzi | Unit 13 : Web Design and Development| Assignment 01

Assignment Brief

Unit Learning Outcomes:

LO1 Explain server technologies and management services associated with hosting and managing
websites.
LO2 Categorise website technologies, tools and software used to develop websites.
LO3 Utilise website technologies, tools and techniques with good design principles to create a
multipage website.
LO4 Create and use a Test Plan to review the performance and design of a multipage website.

Assignment Brief and Guidance:

Assignment Brief

Malcolm Lismore is a freelance photographer based on the North West coast of Scotland. His
biggest passion in photography is for the natural world. He sells many images of the rugged
Scottish landscape, its natural wildlife and coastal birds. However, it’s not just landscape and
wildlife photography he is interested in, like many photographers he can also be hired for
weddings, portraits, and special events.

Malcolm is looking for new ways to promote his business and has approached you to develop
a website that will act as a showcase of his photography skills and allow users to make
enquires about hiring him for weddings and special occasions. The website will need to
provide the following features:

• A home page from which it is possible to navigate to the other resources in the
website. The home page will need to quickly communicate the purpose of the site,
be visually engaging and provide clear navigation to the rest of the site.
• A page that provides basic information about Malcolm, his experiences and his
passion for photography.
• A page that provides information about Malcolm’s prices.
• A series of pages (initially between three and six pages) that will act as a gallery and
showcase of Malcolm’s photography. This is a really important part of the website
as it will be the main way in which the services of his business will be promoted.
You will need to think carefully about how to present the images and how to
structure this part of the site. Bear in mind that in the future Malcolm will want to
add many additional photographs to this part of the site.
• An enquiry form. Malcolm would like to provide a way for customers to make
enquiries about possible bookings. The user will need to be able to enter details such
their contact details, location and date of the wedding etc. into a HTML form.
 Develop a web-based solution for the above scenario and produce a report covering the
following tasks.

Task 1 - Server technologies and management services associated with hosting and
managing websites (LO1)

1.1 Differentiate the communication protocols, server hardware, operating systems and web
server software with regards to designing, publishing and accessing a website. Define the
types of DNS and the uses of it, with clarifications on how domain names are structured.

1.2 Analyze the effect of search engines on website performance. Provide evidence-based
support for improving a site’s index value and rank through search engine optimization.
Identify and explain the common web development technologies and frameworks.
Explain the tools and techniques chosen to the web application and hence justify, by
giving reasons, why a web application is suitable for the given scenario.

Task 2 - Categories website technologies, tools and software used to develop websites
(LO2)
2.1 Define the relationships between front-end and back-end website technologies and
explain how the front-end and the back-end relate to presentation and application layers.

2.2 Critically compare the different between online website creation tools and custom-
built sites. Consider Followings: design flexibility, performance, functionality, User
Experience (UX) and User Interface (UI). Compare and contrast the tools and techniques
available to design and develop a custom-built web application for Malcome and Lismore.
Select the most suitable tools, techniques and justify your selection with valid reasons.

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 Task 3 - Utilize website technologies, tools and techniques with good design principles
to create a multipage website (LO3)

3.1 Design a suitable web application solution for the given scenario. Provide evidences of
the design, multipage website supported with fidelity wireframes and a full set of client
and user requirements. Use your design document with appropriate principles, standards
and guidelines to produce a branded, multipage website supported with realistic content.
Note - Synthesize client and the server-side functionalities in the proposed design
3.2 Implement the designed system using PHP, JS and MySQL. Screenshots of important
code lines with proper comments and user interfaces filled with sample data must be
attached to the documentation. Apply a database design for the proposed system and
provide the well normalized database design of the proposed system. Critically evaluate
the web design and development process against your design document and analyse any
technical challenges you faced in development.

Task 4 - Create and use a Test Plan to review the performance and design of a
multipage website (LO4)

4.1 Analyse the Quality Assurance (QA) process and review how it was implemented
during your design and development stages.
QA process is expected to discover design issues and development errors while
testing a product’s user interface (UI) and gauging the user experience (UX).

4.2 Evaluate the results of your Test Plan and include a review of the overall success of
your multipage website; use this evaluation to explain any areas of success and
provide justified recommendations for areas that require improvement. Prepare a user
documentation to properly guide the users of the implemented system.
Note: User documentation should be simple and understandable by anyone. Use screenshots
and provide stepwise guidance.

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 Grading Criteria
Grading Criteria Achieved Feedback

LO1 Explain server technologies and

management services associated with hosting
and managing websites

P1 Identify the purpose and types of DNS,

including explanations on how domain names
are organized and managed.
P2 Explain the purpose and relationships
between communication protocols, server
hardware, operating systems and web server
software with regards to designing, publishing
and accessing a website.
M1 Analyse the impact of common web
development technologies and frameworks
with regard to website design, functionality and
management.
M2 Review the influence of search engines on
website performance and provide evidence-
based support for improving a site’s index
value and rank through search engine
optimisation
D1 Justify the tools and techniques chosen to
realize a custom built
website.
LO2 Categories website technologies, tools
and
software used to develop websites
P3 Discuss the capabilities and relationships
between front-end and back-end website

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 technologies and explain how these relate to
presentation and application layers.

P4 Discuss the differences between online

website creation tools and custom built sites
with regards to design flexibility, performance,
functionality, User Experience (UX) and User
Interface (UI).
M3 Analyse a range of tools and techniques
available to design and develop a custom-built
website.
LO3 Utilize website technologies, tools and
techniques
with good design principles to create a
multipage
website
P5 Create a design document for a branded,
multipage website supported with medium
fidelity wireframes and a full set of client and
user
requirements.
P6 Use your design document with appropriate
principles, standards and guidelines to produce
a branded, multipage website supported with
realistic content.
M4 Justify the multipage website
implementation decisions against the design
document.
D2 Evaluate the design and development
process of the multipage website against the
design document including any technical
challenges faced.
LO4 Create and use a Test Plan to review the

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 performance and design of a multipage
website
P7 Create a suitable Test Plan identifying key
performance area and
use it to review the functionality and
performance of your website.
M5 Analyse the Quality Assurance (QA)
process and review how it was implemented
during the multipage website design and
development stages.
D3 Evaluate the results of the Test Plan and the
overall success of the multipage website with
recommendations for improvement.

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 Observation Sheet

Activity Activity Learning Feedback

No Outcome (Pass/ Redo)
1 Explain server technologies and LO1
management services
associated with
hosting and managing websites.
2 categorize website LO2
technologies, tools and software
used to develop
websites.
3 Utilize website technologies, LO3
tools and techniques with good
design
principles to create a multipage
website.
4 Create and use a Test Plan to LO4
review the performance and
design of a
multipage website.

Comments:

Assessor Name :…………………………………………….

Date :…………………………………………….
Assessor Signature :…………………………………………….

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 Acknowledgement.

I want to sincerely thank Ms. Dharshini, our WDD lecturer, for her assistance and helpful
advice during this assignment.

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 Table of Contents
Acknowledgement. ................................................................................................................. 17

1. Introduction .................................................................................................................... 23

2. Aim & Objectives. .......................................................................................................... 24

Task 1 ...................................................................................................................................... 25

1.1 Differentiate the communication protocols, server hardware, operating systems

and web server software with regards to designing, publishing and accessing a website.
25

a. Identify the purpose and types of DNS, including explanations on how domain
names are organized and managed .................................................................................. 25

1. Communication Protocols. ..................................................................................... 25

29

2. Web Server Software and Hardware .................................................................... 30

3. Explain URL ............................................................................................................ 36

4. Explain Server Hardware ....................................................................................... 37

Hosting Operating System............................................................................................. 40

b. Identify the purpose and types of DNS, including explanations on how domain
names are organized and managed .................................................................................. 41

1. What is DNS Server ................................................................................................ 41

2. How domain names are organized and managed ................................................. 42

3. What are the different types of DNS Server ......................................................... 43

4. DNS Hierarchy. ....................................................................................................... 45

5. Domain name ........................................................................................................... 45

1.2 Analyze the effect of search engines on website performance. Provide evidence-
based support for improving a site’s index value and rank through search engine
optimization ............................................................................................................................ 46

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 a. Review the influence of search engines on website performance and provide
evidence-based support for improving a site’s index value and rank through search
engine optimization ............................................................................................................ 46

Identify and explain the common web development technologies and frameworks.
Explain the tools and techniques chosen to the web application and hence justify, by
giving reasons, why a web application is suitable for the given scenario.......................... 49

a. Analyse the impact of common web development technologies and frameworks

with regard to website design, functionality and management. .................................... 49

b. Justify the tools and techniques chosen to realize a custom-built website ............. 74

Task 2. ..................................................................................................................................... 76

1.3 Define the relationships between front-end and back-end website technologies
and explain how the front-end and the back-end relate to presentation and application
layers. ...................................................................................................................................... 76

a. Discuss the capabilities and relationships between front-end and back-end

website technologies and explain how these relate to presentation and application
layers. .................................................................................................................................. 76

1.2.1 Front-end Development. .................................................................................. 76

1.2.2 Back-end Development. ................................................................................... 77

1.2.3 Relationship between front- end and back- ends .......................................... 78

1.2.4 How front- end and back- end relate to presentation and application layer.
79

2.3 Critically compare the different between online website creation tools and
custom-built sites. Consider Followings: design flexibility, performance, functionality,
User Experience (UX) and User Interface (UI). .................................................................. 80

a. Discuss the differences between online website creation tools and custom-built
sites with regards to design flexibility, performance, functionality, User Experience
(UX) and User Interface (UI). ........................................................................................... 80

2.2.1 Online Website creational tools. ..................................................................... 80

2.2.2 Custom built Website ...................................................................................... 80

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 2.2.3 The differences between Online Website creational tools and Custom-built
tools. 81

Compare and contrast the tools and techniques available to design and develop a
custom-built web application for Malcome and Lismore. Select the most suitable tools,
techniques and justify your selection with valid reasons.................................................... 83

b. Analyse a range of tools and techniques available to design and develop a custom-
built website ........................................................................................................................ 83

2.2.4 Malcome’s Custom Built Web Application ................................................... 87

Malcome Justification .................................................................................................... 88

2.2.5 Lismore’s Custom Build Web Application .................................................... 89

Lismore Justification ..................................................................................................... 90

3.1 Design a suitable web application solution for the given scenario. Provide evidences
of the design, multipage website supported with fidelity wireframes and a full set of
client and user requirements................................................................................................. 91

a. Create a design document for a branded, multipage website supported with

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

3.1.1 Client and User Requirement. ............................................................................. 91

3.1.2 Wireframes. ........................................................................................................... 93

3.3 Implement the designed system using PHP, JS and MySQL. Screenshots of
important code lines with proper comments and user interfaces filled with sample data
must be attached to the documentation ............................................................................... 94

Home page ...................................................................................................................... 96

Gallery. ............................................................................................................................ 98

Gallery. ............................................................................................................................ 99

HTML Code.................................................................................................................. 100

About Us Page .............................................................................................................. 102

More Bookings and details. ......................................................................................... 105

HTML Code.................................................................................................................. 106

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 Apply a database design for the proposed system and provide the well normalized
database design of the proposed system............................................................................. 107

Database design for the Contact Page ........................................................................ 107

Critically evaluate the web design and development process against your design
document and analyze any technical challenges you faced in development. .................. 109

Homepage Design and Navigation .............................................................................. 109

4.1 Analyze the Quality Assurance (QA) process and review how it was implemented
during your design and development stages. ..................................................................... 111

QA process is expected to discover design issues and development errors while testing a
product’s user interface (UI) and gauging the user experience (UX). ............................ 111

a. Analyze the Quality Assurance (QA) process and review how it was implemented
during the multipage website design and development stages. .................................... 111

Quality Assurance (QA) .............................................................................................. 111

4.2 Evaluate the results of your Test Plan and include a review of the overall success
of your multipage website; use this evaluation to explain any areas of success and
provide justified recommendations for areas that require improvement. Prepare a user
docmentation to properly guide the users of the implemented system ........................... 112

a. Create a suitable Test Plan identifying key performance area and use it to review
the functionality and performance of your website ...................................................... 112

Test Case ....................................................................................................................... 112

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

1. Summary of the key findings................................................................................ 112

Areas requiring improvement ..................................................................................... 114

Provide justified recommendations for areas that require improvement. ............. 115

Overall Evaluation ....................................................................................................... 117

Success story of the system development. .................................................................. 117

Step 01: .............................................................................................................................. 119

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 Step 02: .............................................................................................................................. 120

Step 03: .............................................................................................................................. 121

Step 04: .............................................................................................................................. 122

Step 05: .............................................................................................................................. 123

Step 06: .............................................................................................................................. 124

References ............................................................................................................................. 125

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 1. Introduction.
Malcolm Lismore is a freelance photographer based on the North West coast of Scotland.
His biggest passion in photography is for the natural world. He sells many images of the
rugged Scottish landscape, its natural wildlife and coastal birds. However, it’s not just
landscape and wildlife photography he is interested in, like many photographers he can also
be hired for weddings, portraits, and special events.

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 2. Aim & Objectives.
Aim: Develop a Web based solution for Malcolm Lismore freelance photographer.

Objective:

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 Task 1

1.1 Differentiate the communication protocols, server hardware,

operating systems and web server software with regards to
designing, publishing and accessing a website.

a. Identify the purpose and types of DNS, including explanations on how

domain names are organized and managed.

1. Communication Protocols.

Following are the different types of communication protocols.

Transmission Control Protocol.

Figure 1 Transmission Control Protocol

https://www.google.com/search?q=transmission+control+protocol&sca_esv=6946a8fe4d35
5c0f&sca_upv=1&biw=1482&bih=706&sxsrf=ACQVn090v1pYWTSOkLR59ZHXqNzgX
orIaw:1714229958164&ei=xhItZsnACZTl2roP-
7yEsA8&oq=transmission+c&gs_lp=Egxnd3Mtd2l6LXNlcnAiDnRyYW5zbWlzc2lvbiBjK
gIIADIFEAAYgAQyBRAAGIAEMgUQABiABDIFEAAYgAQyBRAAGIAEMgUQABiA
BDIFEAAYgAQyBRAAGIAEMgUQABiABDIFEAAYgARIt4QBUMo2WNlycAF4AJA
BAJgBigegAZIsqgENMC4zLjMuMi4yLjIuMrgBA8gBAPgBAZgCD6AC6CzCAgcQABi
ABBgYwgIEECMYJ8ICChAAGIAEGEMYigXCAggQABiABBixA8ICCxAAGIAEGLE

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 DGIoFwgINEAAYgAQYsQMYQxiKBZgDAIgGAZIHDTEuMy4zLjEuMy4zLjGgB-
5U&sclient=gws-wiz-serp&tbm=isch#imgrc=zUhYnUDaUySHKM

A set of guidelines known as a transmission control protocol enables information to be

transmitted between two or more entities in a communications system using any
combination of a physical quantity. The protocol outlines the guidelines, syntax, semantics,
communication synchronization, and potential error- recovery techniques. Hardware,
Software, or a combination of the two may be used to implement protocols. Systems for
communication exchange different kinds of messages using predetermined formats. Every
communication has a specific meaning meant to produce a reaction from a set of potential
replies predetermined for that specific circumstance. Usually, the specified behavior is
independent of the implementation method. All interested parties must agree on
communication protocols. A protocol may be turned into a technical standard in order to get
to a consensus.

There is a close similarity between programming languages and protocols: protocols are to
communicate what programming languages are to computations. A programming language
describes the same for computations. Another way putting it is that protocols are like
algorithms to communication. Different surface of single communication is frequently
described by multiple protocols. (Hilpisch, Duchscher E Robert, Rob & Seel, mark et al,
2009)

HTTP.

Figure 2 HTTP

https://www.google.com/search?q=http+protocol&tbm=isch&ved=2ahUKEwjUyIji7oSG
AxXhm2MGHRnwAAcQ2-
cCegQIABAA&oq=http&gs_lp=EgNpbWciBGh0dHAqAggCMgQQIxgnMgoQABiABB
hDGIoFMgoQABiABBhDGIoFMgoQABiABBhDGIoFMgoQABiABBhDGIoFMgoQAB
iABBhDGIoFMgoQABiABBhDGIoFMgoQABiABBhDGIoFMgoQABiABBhDGIoFMg

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 UQABiABEi0GVAAWABwAHgAkAEAmAH4AaAB-
AGqAQMyLTG4AQHIAQCKAgtnd3Mtd2l6LWltZ4gGAQ&sclient=img&ei=_wE_ZpT
NM-G3juMPmeCDOA&bih=706&biw=1482#imgrc=SNh0uSabu1CgqM

Users of distributed, cooperative, hypermedia information systems can exchange data via the
World Wide Web thanks to an application protocol called the Hypertext Transfer Protocol.
Together with HTML, HTTP was developed to produce the World Wide Web, the first text-
based interactive web browser. Even now, one of the main ways to access the Internet is still
through the protocol.

Through the transmission of hypertext messages between clients and servers, HTTP, a
request-response protocol, enables users to interact with web resources like HTML files. In
order to communicate with servers, HTTP clients often employ Transmission Control
Protocol (TCP) connections. (PROTOCOL SUPPORT LIBRARY, n.d.)

User Datagram Protocol.

Figure 3 User Datagram Protocol

https://www.google.com/search?q=user+datagram+protocol&tbm=isch&ved=2ahUKEwiy
wMXl7oSGAxXm7DgGHXusB5wQ2-
cCegQIABAA&oq=user+&gs_lp=EgNpbWciBXVzZXIgKgIIAjIEECMYJzIEECMYJzIK
EAAYgAQYQxiKBTIKEAAYgAQYQxiKBTIKEAAYgAQYQxiKBTIFEAAYgAQyBR
AAGIAEMgUQABiABDIFEAAYgAQyBRAAGIAESJiZRFCP_ENY4odEcAF4AJABAJ
gBgAOgAYoOqgEFMi0zLjO4AQHIAQD4AQGKAgtnd3Mtd2l6LWltZ8ICCBAAGIAE
GLEDwgILEAAYgAQYsQMYigXCAg0QABiABBixAxhDGIoFiAYB&sclient=img&ei
=BwI_ZvKgCObZ4-EP-9ie4Ak&bih=706&biw=1482#imgrc=tKQyRsRfbZwuIM

One Transport Layer protocol is called User Datagram Protocol (UDP). The Internet Protocol
suite, sometimes known as the UDP/IP suite, includes UDP. It is an unstable, connectionless
protocol in contrast to TCP. Therefore, establishing a connection is not necessary prior to
data transfer. Over the network, the UDP aids in the establishment of low-latency, loss-

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 tolerant connections. Process-to-process communication is made possible via the UDP.

While Transmission Control Protocol (TCP) is the predominant transport layer protocol
utilized by the majority of Internet services, it comes at a cost in terms of extra overhead and
delay. TCP guarantees delivery and dependability among other benefits. UDP enters the
scene at this point. UDP is necessary for real-time services like phone or video
communication, live conferencing, and computer gaming. Due to the requirement for fast
performance, UDP allows packets to be rejected in lieu of handling packets that are delayed.
Because UDP lacks error checking, it also uses less bandwidth. (geeksforgeeks, 2024)

HTTPS.

Figure 4 HTTPS

https://www.google.com/search?q=https&&tbm=isch&ved=2ahUKEwiM1q7x-
YSGAxUfwqACHQd4DcgQ2-
cCegQIABAA&oq=https&gs_lp=EgNpbWciBWh0dHBzMgUQABiABDIFEAAYgAQyB
RAAGIAEMgUQABiABDIFEAAYgAQyBRAAGIAEMgUQABiABDIFEAAYgAQyBR
AAGIAEMgUQABiABEiKdVCAGVjDaHACeACQAQGYAawEoAH5GqoBCzAuMS4z
LjMuMi4xuAEDyAEA-
AEBigILZ3dzLXdpei1pbWfCAgoQABiABBhDGIoFwgIEECMYJ8ICCBAAGIAEGLED
wgILEAAYgAQYsQMYgwGIBgE&sclient=img&ei=qA0_ZoziK5-
Eg8UPh_C1wAw&bih=706&biw=1482#imgrc=Y0cPQki8RnJjyM

HTTP is available encrypted under the name Hypertext Transfer Protocol Secure (HTTPS). It
is the protocol that allows data to be transferred between servers—computers that host
websites—and web browsers like Chrome.

A website that employs HTTPS encrypts (or scrambles) the connection between your browser
and the website's server. By doing this, hackers are prevented from snooping on your data.

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 HTTP is available encrypted under the name Hypertext Transfer Protocol Secure (HTTPS). It
is the protocol that allows data to be transferred between servers computers that host websites
and web browsers like Chrome.

A website that employs HTTPS encrypts (or scrambles) the connection between your browser
and the website's server. By doing this, hackers are prevented from snooping on your data. (
Skopec Christine, Paruch Zach , 2024)

File Transfer Protocol.

Figure 5 File Transfer Protocol

https://www.google.com/search?q=file+transfer+protocol&tbm=isch&ved=2ahUKEwjdp4yP
_4SGAxVy5jgGHQzVAvkQ2-
cCegQIABAA&oq=file+t&gs_lp=EgNpbWciBmZpbGUgdCoCCAAyBRAAGIAEMgUQA
BiABDIFEAAYgAQyBRAAGIAEMgUQABiABDIFEAAYgAQyBRAAGIAEMgUQABiA
BDIFEAAYgAQyBRAAGIAESPVQUIUNWNtBcAB4AJABAJgBogOgAawOqgEJMC4xL
jUuMC4xuAEByAEA-
AEBigILZ3dzLXdpei1pbWfCAgoQABiABBhDGIoFwgIEECMYJ8ICCBAAGIAEGLEDiA
YB&sclient=img&ei=JRM_Zp2BD_LM4-
EPjKqLyA8&bih=706&biw=1482#imgrc=NJy1gpMbFdEG1M

The process of transferring data between devices via a network is referred to as file transfer
protocol, or FTP. When one party permits another to send or receive files via the Internet, the
process functions. It was first intended to facilitate communication and information sharing
between two physical devices. These days, it's frequently used to store files on cloud servers,
which are typically safe repositories that can be accessed from a distance.

Websites can upload or download files from their servers using File transmit Protocol (FTP),
which can be used by individuals or businesses to transmit files between computer systems. (
MITCHELL CORY, KHARTIT KHADIJA, SCHMITT KIRSTEN ROHRS , 2023)

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 Post Office Protocol.

Figure 6 Post Office Protocol

https://www.google.com/search?q=post+office+protocol&tbm=isch&ved=2ahUKEwi0we2zh
4WGAxV97DgGHQ5kCjwQ2-
cCegQIABAA&oq=post+&gs_lp=EgNpbWciBXBvc3QgKgIIBDIKEAAYgAQYQxiKBTIK
EAAYgAQYQxiKBTIFEAAYgAQyCBAAGIAEGLEDMgoQABiABBhDGIoFMgUQABi
ABDIFEAAYgAQyBRAAGIAEMgUQABiABDIFEAAYgARIkkVQighYqiJwAHgAkAEA
mAGBBaABhBSqAQswLjEuMC4xLjIuMrgBAcgBAPgBAYoCC2d3cy13aXotaW1nwgIEE
CMYJ8ICCxAAGIAEGLEDGIoFwgINEAAYgAQYsQMYQxiKBcICCxAAGIAEGLEDGI
MBiAYB&sclient=img&ei=1Rs_ZvSCMv3Y4-
EPjsip4AM&bih=706&biw=1482#imgrc=q6ip_31qQTw_AM

Client-based email programs are connected to the Post Office Protocol (POP) service, a
network server, in order to access a user's email on a central server. POP servers are
frequently found on an Internet service provider's (ISP) network, where they help clients
receive their emails. POP communication frequently transmits authentication data in cleartext
without encryption. The USER and PASS commands provide the remote server with the
username and password information. (ScienceDirect, 2002)

2. Web Server Software and Hardware.

2.1 What is Web Server.

Web pages are collections of data that are stored on a computer (sometimes referred to as
server space) on the Internet. This data can include text files, database files, photos,
hyperlinks, and more. Dedicated server-side software is what makes up a web server. The
webserver organizes all the data elements into a well-structured web page and uses the

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 Internet to send it back to the web browser when a user requests that their web browser
execute a particular webpage.

The HTTP protocol (Hypertext Transfer Protocol) facilitates the communication between a
web server and a web browser. The majority of the material on these saved web pages is
static and includes text files, style sheets, HTML documents, and graphics. Web servers,
however, can provide static as as well as dynamic materials. Web servers also help with file
storage and email services. In order to support the corresponding services, it additionally
makes use of the SMTP (Simple Mail Transfer Protocol) and FTP (File Transfer Protocol)
protocols. Web servers are mostly used for web hosting, which involves storing website data
and executing online applications.

The web servers' hardware, which controls data exchange between many linked devices, is
connected to the Internet. On the other hand, the web server software is in charge of
managing the user's access to supplied files. The client/server paradigm is best illustrated via
web server administration. Web server software is therefore required for all machines hosting
websites, regardless of whether they include dynamic or stateful web page content.
(Javatpoint, n.d.)

2.1.1 What are Web Browsers.

2.1.1.1 Google.

Figure 7 Google

https://www.google.com/search?q=google&tbm=isch&ved=2ahUKEwjo0Ln-
3YWGAxVo7DgGHWl5AP8Q2-cCegQIABAA#imgrc=uN7x04RgFSrZRM

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 In inclusive learning environments, there are a plethora of free or inexpensive tools and
extensions available for the Google Chrome browser, which is widely used on computers
these days. For both students with and without disabilities, teachers can offer helpful learning
assistance by using widely available Google Chrome browser apps and extensions (M.W. and
Rao at al, 2019). The basis of the Google Chrome browser's approach to internet security is
sandboxing. Because every open webpage functions as an independent process, malicious
code on one page cannot affect other pages or the computer's operating system. The browser
is compatible with web standards like HTML5 and cascading style sheets.

2.1.1.2 Microsoft Edge.

Figure 8 Microsoft Edge

https://www.google.com/search?q=microsoft+edge&tbm=isch&ved=2ahUKEwjqos6A3oWG
AxWQ3DgGHUo9CPAQ2-
cCegQIABAA&oq=mic&gs_lp=EgNpbWciA21pYyoCCAIyDRAAGIAEGLEDGEMYigUy
ChAAGIAEGEMYigUyChAAGIAEGEMYigUyDRAAGIAEGLEDGEMYigUyChAAGIA
EGEMYigUyChAAGIAEGEMYigUyChAAGIAEGEMYigUyDRAAGIAEGLEDGEMYig
UyChAAGIAEGEMYigUyChAAGIAEGEMYigVIky1Q4xpYgiBwAHgAkAEAmAGKAq
ABhAeqAQUwLjIuMrgBAcgBAPgBAYoCC2d3cy13aXotaW1nwgIFEAAYgATCAgQQIx
gnwgILEAAYgAQYsQMYigXCAggQABiABBixA8ICDhAAGIAEGLEDGIMBGIoFiAYB
&sclient=img&ei=pHY_ZurADpC54-EPyvqggA8#imgrc=YlKnJDrMe1CF6M

Edge is a streamlined browser based on web standards that is centered on web services. The
browser was given the codename Spartan while it was still under development because of its
lightweight architecture, which attempts to enable Edge to function on a range of, usually
mobile, device platforms.

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 2.1.1.3 Opera.

Figure 9 Opera

https://www.google.com/search?q=opera&tbm=isch&ved=2ahUKEwif6IKX4IWGAxUK2jgG
HVaODpEQ2-
cCegQIABAA&oq=op&gs_lp=EgNpbWciAm9wKgIIADIKEAAYgAQYQxiKBTIKEAAYgAQYQxiKB
TIKEAAYgAQYQxiKBTIKEAAYgAQYQxiKBTIKEAAYgAQYQxiKBTIKEAAYgAQYQxiKBTIKEAAYgA
QYQxiKBTIKEAAYgAQYQxiKBTINEAAYgAQYsQMYQxiKBTIKEAAYgAQYQxiKBUiaWVCaCVjnTH
ADeACQAQGYAcQCoAGrDqoBBzAuMy40LjG4AQHIAQD4AQGKAgtnd3Mtd2l6LWltZ8ICBRA
AGIAEwgIEEAAYA8ICCBAAGIAEGLEDwgIEECMYJ4gGAQ&sclient=img&ei=7Hg_Zp_CBoq04-
EP1py6iAk#imgrc=vPEtT0igFj7OIM

Opera Browser is made for the changing internet: make use of group tabs, chat with AI, avoid
adverts, and use Opera's free VPN. Connect your mobile and desktop browsers, and explore
hundreds of additional features that truly set Opera Browser apart.

2.1.1.4 Mozilla Firefox.

Figure 10 Mozilla Firefox

https://www.google.com/search?q=mozilla+firefox&tbm=isch&ved=2ahUKEwie2oGh4YW
GAxWk2jgGHYaXCkEQ2-
cCegQIABAA&oq=mo&gs_lp=EgNpbWciAm1vKgIIAjIEECMYJzIEECMYJzIKEAAYgAQYQxiKBTI
KEAAYgAQYQxiKBTIKEAAYgAQYQxiKBTIKEAAYgAQYQxiKBTIFEAAYgAQyCBAAGIAEGLEDMgg
QABiABBixAzIOEAAYgAQYsQMYgwEYigVIuxZQmAdY0QpwAHgAkAEAmAGBAqABrgWqAQ
MyLTO4AQHIAQD4AQGKAgtnd3Mtd2l6LWltZ4gGAQ&sclient=img&ei=DXo_Zt6fHqS14-
EPhq-qiAQ#imgrc=qPdrw3o4WpjilM

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 Mozilla Firefox is a free web browser that you may use to access the internet. With a wide
range of plugins available for customization, it can be used as an Open-Source substitute for
Microsoft's Internet Explorer. Mozilla Firefox can be downloaded for free from Firefox.com.

2.1.1.5 UC Browser.

Figure 11 UC Browser

https://www.google.com/search?q=uc+browser&tbm=isch&ved=2ahUKEwips83s4YWGAx
W12zgGHTHIBAYQ2-
cCegQIABAA&oq=uc+&gs_lp=EgNpbWciA3VjICoCCAAyChAAGIAEGEMYigUyBRAAGIAEMgU
QABiABDIFEAAYgAQyBRAAGIAEMgUQABiABDIFEAAYgAQyBRAAGIAEMgUQABiABDIFEAAYg
ARI7BpQ4AlYsxJwAHgAkAEAmAGPAqABlgeqAQUwLjEuM7gBAcgBAPgBAYoCC2d3cy13aXot
aW1nwgIEECMYJ8ICCBAAGIAEGLEDwgILEAAYgAQYsQMYigWIBgE&sclient=img&ei=rHo_Zq
mtAbW34-EPsZCTMA#imgrc=xCXwPEiO2SCktM

Cross-platform web browser UC Browser is mainly designed for mobile devices. Due to its
reputation for reduced program sizes and data compression, it has gained popularity in
emerging economies where consumers typically possess smartphones with more constrained
internet connection and device capacity.

2.1.2 What is Web Server Hardware.

1. Processor (CPU): The CPU is in charge of processing data and carrying out
instructions. High clock speed multi-core processors are ideal for web servers in order
to effectively manage several requests at once. In web server configurations, CPUs
from AMD (Ryzen or EPYC) and Intel (Xeon) are frequently utilized.

2. Memory (RAM): RAM is essential for momentarily storing and accessing data. A
server with enough RAM can handle several requests at once without experiencing
any lag in speed. This guarantees smooth operation. The workload and the size of the

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 hosted apps determine how much Memory is needed. Numerous gigabytes or even
terabytes of RAM are frequently found in servers.

3. Storage (Solid State or Hard Disk Drives): Web servers need storage to hold
databases, web content, and other data. SSDs perform better than HDDs because they
have faster read and write speeds. Hard Disk Drives (HDDs) are more expensive per
gigabyte but have larger storage capabilities. To achieve faster access to frequently
accessed data, many servers combine SSDs with HDDs for bulk storage.

4. Network Interface Card (NIC): The NIC enables network connectivity and internet-
based device communication for the server. For dependable and quick network
connectivity, servers frequently employ Gigabit Ethernet or higher-speed network
interfaces.

5. Power Supply Unit (PSU): The PSU uses mains electricity to convert AC power into
DC power that the server's components need. In order to maintain uninterrupted
operation, servers usually require redundant power supplies in the event that the PSU
fails.

6. Cooling System: To avoid overheating and preserve peak performance, web servers
need effective cooling systems, such as fans and heat sinks. Web servers produce heat
while they are in use.

7. Chassis: The chassis, also known as the server case, organizes and physically protects
every component. Tower servers are appropriate for smaller deployments, although
rack-mounted servers are frequently utilized in data centers.

8. Redundancy and Fault Tolerance: Web servers frequently include redundancy and
fault-tolerant features, such as redundant power supplies, RAID configurations for
storage, and backup network connections, to ensure high availability and reduce
downtime.

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 3. Explain URL.

Figure 12 URL

https://www.google.com/search?q=url&tbm=isch&ved=2ahUKEwi3h7vmiYWGAxVX7jgG
HaABCQsQ2-
cCegQIABAA&oq=url&gs_lp=EgNpbWciA3VybDIKEAAYgAQYQxiKBTIKEAAYgAQY
QxiKBTIKEAAYgAQYQxiKBTIKEAAYgAQYQxiKBTIFEAAYgAQyBRAAGIAEMgoQ
ABiABBhDGIoFMgUQABiABDIFEAAYgAQyBRAAGIAESNIQUNoJWKcOcAB4AJAB
AJgB4gOgAfIIqgEJMC4xLjIuMC4xuAEDyAEA-
AEBigILZ3dzLXdpei1pbWfCAgYQABgHGB7CAgcQABiABBgYwgIEECMYJ8ICCBAA
GIAEGLEDwgILEAAYgAQYsQMYigWIBgE&sclient=img&ei=WB4_Zrf7Mdfc4-
EPoIOkWA&bih=706&biw=1482#imgrc=6FdVzj-mfB3_IM&imgdii=6KKgi5t4ABnSSM

An address on the Web, also referred to as a uniform resource locator (URL).

Is a reference to a resource that identifies where it is located on a computer network and

provides a way to retrieve it. Although many people confuse the names, a URL is a particular
kind of Uniform Resource Identifier (URI)

Although they are most frequently used to refer to online pages (HTTP/HTTPS), URLs are
also utilized for many other purposes, including file transfers (FTP), email (mailto), database
access (JDBC), and many more.

The URL of a webpage is often shown in an address bar above the page in most web
browsers. A standard URL would be something like this: http://www.example.com/index.html,
indicating the hostname (www.example.com), the file name (index.html), and the protocol (http).

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 4. Explain Server Hardware.

The actual parts of a server, such as the processor, RAM, storage devices, network interface
cards, and power supply, are referred to as server hardware. These parts are made especially
to withstand the rigors of operating server software and providing clients with resources and
data via a network. In order to maintain high performance and continuous operation for jobs
like hosting websites, administering databases, or running programs for several users at once,
server hardware is usually more durable and dependable than consumer-grade technology.
Companies frequently spend money on top-notch server hardware to support vital business
processes and guarantee the availability and security of their data.

1. CPU.

The physical parts of a server, a computer system intended to supply resources or services to
other computers or devices on a network, are referred to as server hardware. The Central
Processing Unit, or CPU, is one of the most important parts of server hardware. The CPU is
the "brain" of the server; it is in charge of carrying out computations and putting instructions
into action.

According to the most recent perspective, the CPU is an essential part of the server hardware
since it directly affects the capabilities and performance of the server. Modern CPUs are
growing more potent and efficient due to technological breakthroughs, which enables servers
to manage workloads and jobs that are more complicated. Furthermore, many of the newest
CPUs include multiple cores and threads, which allows servers to run numerous tasks at once
and enhance total effectiveness.

All things considered, the CPU is vital to a server's operation, and choosing the appropriate
CPU for a server is critical to guaranteeing peak performance and dependability.

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 2. RAM.

The physical parts of a server, a computer system intended to supply information, programs,
and services to other computers or devices connected to a network, are referred to as server
hardware. It consists of parts including power supply, storage disks, network interface cards
(NICs), random access memory (RAM), and central processor units (CPU).

Random Access Memory, or RAM, is an essential part of server hardware. It acts as a

temporary storage location for information and commands that must be promptly accessed by
the CPU. Sufficient RAM is necessary in server environments to ensure seamless operation,
particularly when managing many concurrent processes or providing service to a large
number of users.

As technology continues to progress, the most recent viewpoint on server RAM emphasizes
capacity expansion. swiftness as well as effectiveness. In order to maximize performance and
minimize power consumption, this includes the use of larger-capacity memory modules,
quicker memory interfaces like DDR5, and improvements in memory management
technology. Furthermore, server memory reliability and error-correction capabilities are
becoming more and more important, especially in mission-critical applications where data
integrity is crucial.

3. Storage.

Storage, which refers to the actual hardware and infrastructure used to store data in a server
environment, is an essential part of server hardware. Solid-state drives (SSDs), hard disk
drives (HDDs), and other storage technologies fall under this category.

According to the most recent perspective, server hardware storage has significantly improved
in terms of capacity, speed, and dependability. High-capacity SSDs, which provide quicker
data access speeds and better performance than conventional HDDs, are now used in modern
servers. Moreover, even higher data transfer speeds and lower latency have changed storage
thanks to technologies like NVMe (Non-Volatile Memory Express).

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 Storage in server hardware is essential to guaranteeing the performance, dependability, and
availability of data. Optimizing server performance and fulfilling compliance requirements
require proper storage configuration and administration. The growing workloads and
requirements of data-intensive applications. Organizations are investing more in advanced
storage solutions to support their changing business needs and improve their server
infrastructure as a result of the exponential growth of data.

4. Network Interface

A hardware element known as a network interface is what links a device to a network. By

sending and receiving data packets, it enables the device to communicate with other devices
on the network. A network interface may take the shape of a wireless adapter, Ethernet
adapter, or network card, depending on the kind of network being utilized.

For the server to be able to connect to the local network or the internet, a Network Interface is
an essential piece of hardware. It serves as a link between the network and the server,
enabling communication and data transfer. The use of quicker and more effective
technologies, like 10 Gigabit Ethernet and even faster rates like 25, 40, or 100, is the newest
trend in network interfaces. Ethernet gigabit. The expanding complexity of network
infrastructure and the growing need for high-speed data transit are driving these
improvements.

All things considered, a network interface is essential to the smooth operation of servers and
their connectivity, and keeping up with emerging technologies can improve the functionality
and efficiency of server hardware. (GENUINE MODULES, 24)

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 Hosting Operating System.

The main operating system installed on a computer system's hard disk is called the host
operating system. It is important to realize that the phrase "host OS" refers exclusively to a
virtualized server when discussing it. The process of turning your server virtual is called
virtualization. The hypervisor, a virtual software barrier, is the sole thing that makes it
feasible. The virtual software and hardware are separated by a hypervisor. In a hosted
virtualization solution, the operating system that the hypervisor runs on top of is referred to as
the host OS by the National Institute of Standards and Technology.

Multiple virtual operating systems, sometimes referred to as "guest operating systems," are
produced by virtualization and can serve as virtual machine or segmented system
components.

What a hosting operating system does?

• Your computer's memory, storage, and processing power are all controlled by the host
operating system. Stated differently, its job is to monitor every aspect of it and
guarantee that your computer functions properly.

• You can create, locate, remove, read, and write files since the host operating system
also manages file structure and storage.

• It distributes resources among many programs to ensure seamless operation.

The host operating system enables you to execute programs and perform common
tasks like online surfing, gaming, viewing videos, listening to music, and more.

• Your computer's user interface is provided by the host operating system.

Programs can connect to other devices (such as keyboards and printers) with its
assistance.

• Numerous security mechanisms are employed by the host operating system to shield
the machine from internet dangers.

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 • The presenter for your computer to communicate with other devices across a network,
the operating system (OS) controls network connections, protocols, and
configurations.

• Virtualization is supported by several host operating systems, enabling the use of

multiple virtual machines on a single device.

b. Identify the purpose and types of DNS, including explanations on how

domain names are organized and managed.

1. What is DNS Server.

A naming scheme for computers, services, and other resources on the Internet or other
Internet Protocol (IP) networks is provided by the Domain Name System (DNS), a
distributed, hierarchical name service. Domain names (identifying strings) assigned to each
of the related entities are associated with different types of information. Its primary function
is to convert easily remembered domain names into the numerical IP addresses required to
find and identify computer services and devices using the underlying network protocols.
Since 1985, the Domain Name System has been a vital part of the Internet's operation.

By appointing authoritative name servers for every domain, the Domain Name System
assigns responsibility for domain name assignment and mapping to Internet resources.
Subdomain control can be delegated by network administrators. to other name servers, a
portion of their designated name space. This technique was created to avoid having a single,
sizable central database and instead provide distributed, fault-tolerant service. Furthermore,
the DNS defines the fundamental technological features of the database service. As a
component of the Internet protocol suite, it defines the DNS protocol, which is a thorough
specification of the data structures and data transfer exchanges utilized in the DNS.

The IP address spaces and the domain name hierarchy are the two primary namespaces that
are maintained on the Internet. The Domain Name System looks after the hierarchy of
domain names and acts as a translator between address spaces and domain names. The

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 Domain Name System is implemented by internet name servers using a communication
protocol. A server that keeps DNS name servers is called a DNS name server.

the DNS entries for a domain; in response to requests made against its database, a DNS name
server provides replies.

Start of authority (SOA), IP addresses (A and AAAA), SMTP mail exchangers (MX), name
servers (NS), pointers for reverse DNS lookups (PTR), and domain name aliases (CNAME)
are the most frequently occurring record types in the DNS database. DNS has grown over
time to hold records for additional kinds of data for either automatic lookups, like DNSSEC
records, or human searches, such responsible person (RP) records, even though it was never
meant to be a general-purpose database. The DNS is a general-purpose database that has been
used to store a real-time blackhole list (RBL) in order to fight spam, or unwanted email. DNS
database is commonly kept in different database systems, but is typically kept in a structured
text file called the zone file.

User Datagram Protocol (UDP) was the initial IP transport protocol used by the Domain
Name System. Concerns about security, privacy, and dependability led to the creation of the
Transmission Control Protocol (TCP) and many additional protocols.

2. How domain names are organized and managed.

Figure 13 Domain name organization

https://www.google.com/search?q=domain+web+organize&tbm=isch&ved=2ahUKEwj76t
vs9YWGAxU45DgGHQgAAssQ2-
cCegQIABAA&oq=domain+web+organize&gs_lp=EgNpbWciE2RvbWFpbiB3ZWIgb3JnYW5p
emVIhR5QgxVY-

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 BtwAHgAkAEAmAHMAaABpgeqAQUwLjQuMbgBA8gBAPgBAYoCC2d3cy13aXotaW1niAYB&
sclient=img&ei=pI8_ZvuIO7jI4-
EPiICI2Aw#imgrc=srrfl_4fVRnHKM&imgdii=QicT4BA7ey870M

3. What are the different types of DNS Server.

Because of the hierarchical servers that underpin the domain name system (DNS), users can
really explore the internet using names that are readable by humans. DNS enables a user to
enter a URL, such as menandmice.com, into their browser and be taken to that location.

2.1 Recursive Server.

Figure 14 Recursive Server

The initial stop in a DNS query is a recursive resolver, sometimes referred to as a DNS
recursor. Recursive resolvers function as go-betweens for clients and DNS nameservers. A
recursive resolver will either reply to a DNS query from a web client with data that has
already been cached, or it will send requests to many nameservers: a root nameserver, a TLD
nameserver, an authoritative nameserver, and finally one more request. The recursive resolver
then responds to the client with the requested IP address it received from the authoritative
nameserver.

The recursive resolver will cache data obtained from authoritative nameservers during this
procedure. When a client makes a recent request for the IP address of a domain name by a
different client, the resolver can bypass the nameserver communication procedure and just
provide the requested record to the client directly from its cache. The majority of Internet
users utilize an ISP-provided recursive resolver.

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 2.2 Root name server.

Figure 15 Root name server

Every recursive resolver is aware of the 13 DNS root nameservers, and they are the first place
a recursive resolver looks for DNS entries. When a recursive resolver queries a root server
with a domain name, the root nameserver replies by pointing the recursive resolver toward a
TLD nameserver (.com,.net,.org, etc.) based on the domain's extension. The Internet
Corporation for Assigned Names and Numbers (ICANN), a nonprofit organization, is in
charge of managing the root nameservers.

Keep in mind that just because there are 13 root nameservers, the root nameserver system
does not consist of just 13 workstations. There are thirteen different kinds of root
nameservers, however each one has several copies distributed over the globe that use Anycast
routing to deliver quick responses. More than 600 distinct servers would result from adding
up all of the instances of root nameservers.

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 4. DNS Hierarchy.

Figure 16 DNS Hierarchy

https://www.google.com/search?q=dns+hierarchy&tbm=isch&ved=2ahUKEwivnoO54oWG
AxWE3DgGHSllBrYQ2-
cCegQIABAA&oq=dns+&gs_lp=EgNpbWciBGRucyAqAggBMgoQABiABBhDGIoFMgU
QABiABDIFEAAYgAQyBRAAGIAEMgUQABiABDIFEAAYgAQyBRAAGIAEMgUQA
BiABDIFEAAYgAQyBRAAGIAESKkuUK8aWKsgcAB4AJABAJgBwwGgAe8GqgEDM
C41uAEByAEA-
AEBigILZ3dzLXdpei1pbWfCAgQQIxgnwgIIEAAYgAQYsQPCAgsQABiABBixAxiKBYg
GAQ&sclient=img&ei=THs_Zq_IEYS54-EPqcqZsAs#imgrc=Dmrc43SD2Qt-AM

5. Domain name.

Domain Name Explanation

• .edu • This extension stands for education. It's
used by all types of schools,
universities, and educational institutions.
• .net • This extension stands for network. It's
now commonly used by all types of
organizations online.
• .org • This extension stands for organization
and was originally intended for use by
nonprofits. Now, it's also commonly

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 used by other types of organizations as
well.
• .gov • This is an extension that is restricted to
government use. It's used by U.S.
government agencies and organizations,
government personnel, and websites for
U.S. cities and regions.
• .com • This extension stands for commercial.
It's now commonly used by businesses
as well as individuals and all types of
organizations.

1.2 Analyze the effect of search engines on website performance.

Provide evidence-based support for improving a site’s index
value and rank through search engine optimization.

a. Review the influence of search engines on website performance and

provide evidence-based support for improving a site’s index value and
rank through search engine optimization.

A website's performance is mostly determined by search engines. Search engine

optimization for websites is impacted by the following major factors:

• Visibility and Traffic: For the majority of websites, search engines are the main
organic traffic source. A website gains more exposure and traffic when it appears
higher on search engine results pages (SERPs). Higher conversion rates and income
may result from this increased traffic.

• User Experience: A website's position on search engines is based on a number of

variables, including mobile friendliness, page load speed, and user experience. In
search results, websites that offer a smooth and intuitive user experience typically

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 appear higher. As a result, increasing a website's performance can both boost user
experience and search engine ranking.

• Indexability and Crawlability: How search engines web crawlers to find and list pages
on the internet. Crawling and indexing may be hampered by a website with slow page
loads or technological problems. Lower visibility and less organic traffic may come
from this. Enhancing the functionality of a website guarantees that search engine
crawlers may effortlessly retrieve and index the material of the website.

• Dwell Time and Bounce Rate: Metrics related to user behavior, such as dwell time
and bounce rate (the percentage of visitors to a website who leave after seeing just
one page), are tracked by search engines. A website that loads slowly or offers a
subpar user experience can raise the bounce rate and decrease stay time, giving search
engines the impression that the website may not be offering worthwhile material. The
ranks of search engines may suffer as a result.

• Mobile Optimization: Using Search engines give preference to mobile-friendly

websites in their rankings due to the growing trend of using mobile devices for
internet browsing. Websites that are not mobile-friendly may see a decline in visitors
and visibility. A website's chances of appearing higher in mobile search results are
increased when it performs better on mobile devices.

• Take into consideration the following actions to enhance website performance and its
effect on search engines:

1. Use browser caching, minify CSS and JavaScript files, and compress images to
improve the speed at which pages load.
2. Use responsive design strategies to make sure the website is mobile-friendly, and
test it across a range of devices.
3. Organizing material, streamlining navigation, and clearing clutter will all improve
user experience.
4. Use resources like Google Analytics and Google Search Console to track down
and fix any problems with your website's performance on a regular basis.

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 To improve a site's index value and rank, it is essential to implement effective search
engine optimization strategies. Here are some evidence-based approaches to enhance a
site's index value and rank:

1. Keyword Research: Find relevant terms and phrases that users are searching for by
conducting in-depth keyword research. Use these keywords naturally in titles,
headings, meta tags, and body text to improve the content of your website.

2. On-Page Optimization: Make on-page components like headings, meta tags, URLs,
and image alt tags as optimized as possible. Make sure the navigation is easy to use,
the website's structure is well-organized, and the URLs are user-friendly.

3. Quality Content: Produce useful, interesting, and high-quality content that matches
user intent. Search engines give preference to websites that offer users valuable
material. Maintain the content's relevance and freshness by expanding and updating it
frequently.

4. Link Building: Create relevant and trustworthy backlinks from other websites.
Prioritize obtaining organic and reliable links by promoting content, guest posting,
and reaching out to influential people in the sector.

5. Technical Optimization: Make sure the website is search-engine optimized from a

technical standpoint. This entails enhancing mobile friendliness, applying schema
markup, speeding up website loads, and repairing broken links.

6. User Experience Optimization: Boost user satisfaction by making websites faster,

more navigable on mobile devices, and easier to use. Give visitors a smooth and easy-
to-use browsing experience.

7. Social Media Integration: Use social media sites to interact with the target audience
and promote content on websites. Search engine rankings may be influenced
indirectly by social signals.

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 8. Analytics and Monitoring: Use analytics tools to keep a regular eye on the
performance of your website. Track keyword ranks, find areas for development, and
evaluate the success of SEO campaigns by analyzing data.

Identify and explain the common web development

technologies and frameworks. Explain the tools and
techniques chosen to the web application and hence justify,
by giving reasons, why a web application is suitable for the
given scenario.

a. Analyse the impact of common web development technologies and

frameworks with regard to website design, functionality and
management.

Following are the common web development technologies.

1. JavaScript.

Figure 17 JavaScript

https://www.google.com/search?q=javascript&tbm=isch&ved=2ahUKEwiU89_O94WGAxV
62zgGHQ77AGwQ2-
cCegQIABAA&oq=ja&gs_lp=EgNpbWciAmphKgIIATIEECMYJzIEECMYJzIIEAAYgAQ
YsQMyBRAAGIAEMggQABiABBixAzIIEAAYgAQYsQMyCBAAGIAEGLEDMgUQAB
iABDIOEAAYgAQYsQMYgwEYigUyCBAAGIAEGLEDSKQWUIYKWIUMcAB4AJAB
AJgBvwGgAZ4EqgEDMC4zuAEByAEA-

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 AEBigILZ3dzLXdpei1pbWeIBgE&sclient=img&ei=fpE_ZpS8PPq24-
EPjvaD4AY#imgrc=DXyN1B871e1LfM

JavaScript (JS) is a first-class programming language that is lightweight and interpreted,

sometimes known as just-in-time compilation. Although it is most commonly used as the
scripting language for Web pages, it is also used in a variety of non-browser settings,
including Adobe Acrobat, Node.js, and Apache CouchDB. JavaScript is a prototype-based,
multi-paradigm, single-threaded, dynamic language that supports imperative, declarative
(such as in functional programming), and object-oriented programming approaches.

The dynamic features of JavaScript include variable parameter lists, function variables,
runtime object construction, source-code recovery (JavaScript functions store their source
text and can be retrieved through toString()), dynamic script creation (via eval), and object
introspection (via for...in and Object utilities).

The JavaScript language itself is the focus of this section, not the portions that are unique to
Web pages or other host environments. For details regarding APIs that are For information
particular to Web pages, see Web APIs and DOM.

2. PHP.

Figure 18 PHP

https://www.google.com/search?q=php&tbm=isch&ved=2ahUKEwjA7duuhYaGAxWn5qA
CHWMWA2UQ2-
cCegQIABAA&oq=p&gs_lp=EgNpbWciAXAqAggDMgQQIxgnMgQQIxgnMgoQABiABB
hDGIoFMgoQABiABBhDGIoFMgoQABiABBhDGIoFMgoQABiABBhDGIoFMgoQABiA
BBhDGIoFMgoQABiABBhDGIoFMgoQABiABBhDGIoFMgoQABiABBhDGIoFSPwYUL
4LWL4LcAB4AJABAJgBmQigAcwJqgEHMC4xLjctMbgBAcgBAPgBAYoCC2d3cy13aX
otaW1niAYB&sclient=img&ei=6Z8_ZoDVN6fNg8UP46yMqAY#imgrc=lpVbLgnDu2t-EM

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 The server-side programming language PHP (Hypertext Preprocessor) is a popular and
adaptable tool for developing dynamic and interactive websites. You will have a thorough
understanding of the PHP scripting language by completing this training. Regardless of your
level of experience, this free PHP lesson will teach you a lot about the PHP scripting
language.

PHP is a well-liked programming language for developing dynamic websites and online apps.
Hypertext Preprocessor is the acronym for PHP. It is an object-oriented, interpreted, server-
side scripting language that is available for free.

All the essential subjects, such as control statements, functions, arrays, strings, file handling,
form handling, regular expressions, date and time manipulation, object-oriented programming
in PHP, mathematical operations, using MySQL and PHP, will be covered in our PHP
tutorial combining PHP with Ajax, using jQuery to maximize PHP's capabilities, and more.

3. CSS (Cascading Styling Sheet).

Figure 19 CSS

https://www.google.com/search?q=css&tbm=isch&ved=2ahUKEwiq1t7phYaGAxWam2MG
HXxzCugQ2-
cCegQIABAA&oq=css&gs_lp=EgNpbWciA2NzczIEECMYJzIEECMYJzIKEAAYgAQYQ
xiKBTIKEAAYgAQYQxiKBTIKEAAYgAQYQxiKBTIKEAAYgAQYQxiKBTIKEAAYg
AQYQxiKBTIKEAAYgAQYQxiKBTIFEAAYgAQyBRAAGIAESJEPUMcGWOQJcAB4
AJABAJgBwQGgAcIFqgEDMC40uAEDyAEA-
AEBigILZ3dzLXdpei1pbWfCAggQABiABBixA8ICCxAAGIAEGLEDGIMBwgIEEAAYA
4gGAQ&sclient=img&ei=ZaA_ZuqPKpq3juMP_OapwA4#imgrc=-vfQiVXMm7XlBM

A stylesheet language called Cascading Style Sheets (CSS) is used to specify how an HTML
or XML document (including XML dialects like SVG, MathML, or XHTML) is presented.
The way elements should appear on a screen, on paper, in speech, or in other media is
specified by CSS.

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 As per W3C specifications, CSS is one of the fundamental languages of the open web and is
standardized across web browsers. In the past, different CSS standard components were
developed concurrently, allowing for the versioning of the most recent recommendations.
Perhaps you are familiar with CSS1, CSS2.1, or perhaps CSS3. Everything is now CSS
without a version number; there will never be a CSS3 or CSS4.

When the development of the various CSS modules began to diverge so much that it was
more efficient to create and publish suggestions for each module independently. Rather than
versioning the CSS specification, W3C now takes recurring snapshots of the most recent
stable version of the definition as well as the development of particular modules.

4. HTML (Hyper Text Markup Language).

Figure 20 HTTP

https://www.google.com/search?q=html&tbm=isch&ved=2ahUKEwjY19r1hoaGAxU3m2M
GHVj1BEkQ2-
cCegQIABAA&oq=html&gs_lp=EgNpbWciBGh0bWwyBBAjGCcyChAAGIAEGEMYigU
yChAAGIAEGEMYigUyChAAGIAEGEMYigUyChAAGIAEGEMYigUyChAAGIAEGEM
YigUyEBAAGIAEGLEDGEMYgwEYigUyChAAGIAEGEMYigUyEBAAGIAEGLEDGE
MYgwEYigUyChAAGIAEGEMYigVI3h9QtxdY2h1wAHgAkAEAmAGoAqABygiqAQU
wLjIuM7gBA8gBAPgBAYoCC2d3cy13aXotaW1nwgINEAAYgAQYsQMYQxiKBYgGA
Q&sclient=img&ei=i6E_ZpjmDbe2juMP2OqTyAQ#imgrc=O2LAft90i-2uhM

Hyper Text Markup Language, or HTML, is the fundamental component of the World Wide
Web. It establishes the structure and meaning of web content. The presentation and
functionality of a web page are typically described by other technologies than HTML (CSS,
JavaScript).

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 Links that join web pages together, either within a single website or across websites, are
referred to as "hypertext". One essential component of the Web is links. You can participate
actively in the World Wide Web by publishing content online and creating links to other
people's pages.

5. Java.

Figure 21 Java

https://www.google.com/search?q=java&tbm=isch&ved=2ahUKEwjwzMieiIaGAxW_9qAC
HQC6CC4Q2-
cCegQIABAA&oq=j&gs_lp=EgNpbWciAWoqAggBMgQQIxgnMgQQIxgnMgoQABiABB
hDGIoFMgoQABiABBhDGIoFMgoQABiABBhDGIoFMgoQABiABBhDGIoFMgoQABiA
BBhDGIoFMgoQABiABBhDGIoFMgoQABiABBhDGIoFMggQABiABBixA0jIElCJCFiJC
HAAeACQAQCYAbMEoAH9BaoBBzItMS41LTG4AQHIAQD4AQGKAgtnd3Mtd2l6LWl
tZ8ICEBAAGIAEGLEDGEMYgwEYigWIBgE&sclient=img&ei=7aI_ZrCiFb_tg8UPgPSi8
AI#imgrc=6YsbFDSVEi3VJM

Java is a widely used object-oriented programming language that was created by Sun
Microsystems in 1995. Programming languages that are not platform-specific are used for
creating cloud apps, Android apps, websites, and artificial intelligence, among many other
things.

From the fundamentals of Java syntax to more complex subjects like object-oriented
programming and exception management, we will cover it all in this course.

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 6. Node.js.

Figure 22 Node.js

https://www.google.com/search?q=node+js&tbm=isch&ved=2ahUKEwilpsHsiYaGAxWv2z
gGHaKtDJ8Q2-
cCegQIABAA&oq=no&gs_lp=EgNpbWciAm5vKgIIADIEECMYJzIKEAAYgAQYQxiKB
TIKEAAYgAQYQxiKBTIKEAAYgAQYQxiKBTILEAAYgAQYsQMYgwEyBRAAGIAE
MggQABiABBixAzIFEAAYgAQyCBAAGIAEGLEDMggQABiABBixA0i8HFCxCVinDH
AAeACQAQCYAdIBoAHkBKoBBTAuMS4yuAEByAEA-
AEBigILZ3dzLXdpei1pbWfCAg4QABiABBixAxiDARiKBYgGAQ&sclient=img&ei=naQ
_ZuXjDq-34-EPotuy-Ak#imgrc=xYpw9LgguPK0rM

A cross-platform, open-source JavaScript runtime environment, Node.js is compatible with a

variety of operating systems, including Windows, Linux, Unix, and macOS. JavaScript code
can be executed outside of a web browser using Node.js, which is powered by the V8
JavaScript engine.

With Node.js, programmers may create server-side scripting and command line tools using
JavaScript. Before a page is sent to a user's web browser, dynamic web page content is
frequently generated using the server's capacity to run JavaScript code. Instead of employing
separate languages for server-side and client-side programming, Node.js represents a
"JavaScript everywhere" approach, bringing online application development under one
umbrella.

The event-driven architecture of Node.js enables asynchronous input and output. These
design decisions are meant to maximize scalability and throughput in web applications with
numerous input/output functions in addition to real-time Web applications (such as browser
games and real-time communication software).

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 7. Python.

Figure 23 Python

https://www.google.com/search?q=python&tbm=isch&ved=2ahUKEwiWzL_QioaGAxXq9q
ACHWTVAWoQ2-
cCegQIABAA&oq=p&gs_lp=EgNpbWciAXAqAggCMgQQIxgnMgQQIxgnMgoQABiABB
hDGIoFMgoQABiABBhDGIoFMgoQABiABBhDGIoFMgoQABiABBhDGIoFMgoQABiA
BBhDGIoFMgoQABiABBhDGIoFMggQABiABBixAzIIEAAYgAQYsQNIgBJQngdYngd
wAHgAkAEAmAHCAaAB_QKqAQMwLjK4AQHIAQD4AQGKAgtnd3Mtd2l6LWltZ4gG
AQ&sclient=img&ei=bqU_ZpbdOOrtg8UP5KqH0AY#imgrc=wJ_8EiJgjRaS-M

Python is a general-purpose, high-level programming language. With a strong emphasis on

indentation, its design philosophy prioritizes code readability.

Python uses garbage collection and dynamic typing. It is compatible with various
programming paradigms, such as object-oriented, functional, and structured (especially
procedural). Because of its extensive standard library, it is frequently referred to as a
"batteries included" language.

Python was developed by Guido van Rossum in the late 1980s as a replacement for the ABC
programming language. Python 0.9.0 was initially made available in 1991.2000 saw the
introduction of Python 2.0. 2008 saw the release of Python 3.0, a significant update that was
not entirely backwards compatible with previous iterations. The final Python 2 release was
Python 2.7.18, which was made available in 2020.

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 8. Backend

Figure 24 Backend

https://www.google.com/search?q=back+end+development&tbm=isch&ved=2ahUKEwjv0M
X5joaGAxVm3zgGHa_KA24Q2-
cCegQIABAA&oq=b&gs_lp=EgNpbWciAWIqAggBMgQQIxgnMgQQIxgnMgoQABiABB
hDGIoFMgoQABiABBhDGIoFMgoQABiABBhDGIoFMgoQABiABBhDGIoFMg0QABiA
BBixAxhDGIoFMgoQABiABBhDGIoFMgoQABiABBhDGIoFMggQABiABBixA0inHFD
xDVjxDXAAeACQAQCYAZoCoAHcA6oBBTAuMS4xuAEByAEA-
AEBigILZ3dzLXdpei1pbWeIBgE&sclient=img&ei=9qk_Zu_9Lea-4-
EPr5WP8AY#imgrc=i0Ny829PSB_f4M

The portions of a computer application or program's code that are necessary for it to function
but are hidden from users' view are referred to as the back end.
9. Frontend.

Figure 25 Frontend

https://www.google.com/search?q=front+end+development&tbm=isch&ved=2ahUKEwjLkf
CYkYaGAxWK2zgGHZhaAX8Q2-
cCegQIABAA&oq=fr&gs_lp=EgNpbWciAmZyKgIIADIEECMYJzIKEAAYgAQYQxiKBT
IKEAAYgAQYQxiKBTIIEAAYgAQYsQMyCBAAGIAEGLEDMgUQABiABDIIEAAYg
AQYsQMyCBAAGIAEGLEDMgUQABiABDIIEAAYgAQYsQNIzSZQ9glYkhxwAHgAk
AEAmAGzAqAB-QWqAQcwLjEuMS4xuAEByAEA-

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 AEBigILZ3dzLXdpei1pbWeIBgE&sclient=img&ei=Uaw_ZoulFIq34-EPmLWF-
Ac#imgrc=-UQ4VoWR8na39M

The process of creating a website's graphical user interface using HTML, CSS, and
JavaScript so that users can view and interact with it is known as front-end web development.

10. Bootstrap.

Figure 26 Bootstrap

https://www.google.com/search?q=bootstrap&tbm=isch&ved=2ahUKEwinmfGFkIaGAxUt2
zgGHQQbA_8Q2-
cCegQIABAA&oq=b&gs_lp=EgNpbWciAWIqAggBMgQQIxgnMgQQIxgnMgoQABiABB
hDGIoFMgoQABiABBhDGIoFMgoQABiABBhDGIoFMggQABiABBixAzIIEAAYgAQYs
QMyCBAAGIAEGLEDMggQABiABBixAzIIEAAYgAQYsQNIqRNQsglYsglwAHgAkAE
AmAHDBKAB3waqAQcyLTEuNS0xuAEByAEA-
AEBigILZ3dzLXdpei1pbWfCAgUQABiABMICBhAAGAcYHsICBhAAGAgYHogGAQ&s
client=img&ei=Has_ZueWBK224-EPhLaM-A8#imgrc=3kPArP9SzRctqM

An open-source, free CSS framework designed for front-end web development that
prioritizes mobile responsiveness is called Bootstrap (previously known as Twitter
Bootstrap). It includes design templates for buttons, forms, typography, navigation, and other
interface elements that are based on HTML, CSS, and (optionally) JavaScript.

With more than 164,000 stars as of May 2023, Bootstrap is GitHub's 17th most starred
project (and 4th most starred library). 19.2% of websites utilize Bootstrap, according to
W3Techs.

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 11. Django.

Figure 27 Django

https://www.google.com/search?q=django+technology&tbm=isch&ved=2ahUKEwilhezkiYa
GAxXm7DgGHXusB5wQ2-
cCegQIABAA&oq=django+tec&gs_lp=EgNpbWciCmRqYW5nbyB0ZWMqAggBMgUQA
BiABDIFEAAYgAQyBxAAGIAEGBgyBxAAGIAEGBhIj2ZQqStYmlxwAngAkAEAmAG
LBKAB9wuqAQswLjEuMi4xLjAuMbgBAcgBAPgBAYoCC2d3cy13aXotaW1nwgIEECM
YJ8ICChAAGIAEGEMYigWIBgE&sclient=img&ei=jaQ_ZuWKCubZ4-EP-
9ie4Ak#imgrc=h4_pgC0NvWn_aM

Written in Python, Django is a very feature-rich and well-known server-side web framework.
This module explains how to set up a development environment, why Django is one of the
most well-liked web server frameworks, and how to get started with building your own
online apps.

12. Vue.ls.

Figure 28 Vue.js

https://www.google.com/search?q=vue+js&tbm=isch&ved=2ahUKEwiFvJzmlIaGAxVK9qA
CHboQCmgQ2-
cCegQIABAA&oq=v&gs_lp=EgNpbWciAXYqAggBMgoQABiABBhDGIoFMgoQABiAB
BhDGIoFMgoQABiABBhDGIoFMgoQABiABBhDGIoFMgoQABiABBhDGIoFMgUQABi
ABDIIEAAYgAQYsQMyCBAAGIAEGLEDMggQABiABBixAzIIEAAYgAQYsQNIrxFQ
kwZYkwZwAHgAkAEAmAG_BaAB-waqAQcwLjEuNi0xuAEByAEA-

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 AEBigILZ3dzLXdpei1pbWfCAgQQIxgniAYB&sclient=img&ei=GLA_ZoXQM8rsg8UPuq
GowAY&bih=706&biw=1468&hl=en#imgrc=GoHRsGddjGchCM

A progressive JavaScript framework for creating user interfaces is called Vue.js. It is

renowned for being straightforward and simple to use, which makes it a great option for
inexperienced developers.

Bidirectional data binding is used by Vue.js to automatically update the user interface with
changes in application data and vice versa.

Additionally, it offers a succinct and straightforward syntax known as "Directives" that

enables you to add presentation logic straight into HTML. because of its step-by-step
methodology and capacity to design dynamic, responsive user interfaces.

• Following are the frameworks.

1. Django.

Figure 29 Django

https://www.google.com/search?q=django+technology&tbm=isch&ved=2ahUKEwilhezkiYa
GAxXm7DgGHXusB5wQ2-
cCegQIABAA&oq=django+tec&gs_lp=EgNpbWciCmRqYW5nbyB0ZWMqAggBMgUQA
BiABDIFEAAYgAQyBxAAGIAEGBgyBxAAGIAEGBhIj2ZQqStYmlxwAngAkAEAmAG
LBKAB9wuqAQswLjEuMi4xLjAuMbgBAcgBAPgBAYoCC2d3cy13aXotaW1nwgIEECM
YJ8ICChAAGIAEGEMYigWIBgE&sclient=img&ei=jaQ_ZuWKCubZ4-EP-
9ie4Ak#imgrc=h4_pgC0NvWn_aM

Written in Python, Django is a very feature-rich and well-known server-side web framework.
This module explains how to set up a development environment, why Django is one of the
most well-liked web server frameworks, and how to get started with building your own
online apps.

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 2. React.js

Figure 30 React.js

https://www.google.com/search?q=front+end+development&tbm=isch&chips=q:front+end+
development,g_1:react:65BECjmiMO8%3D&hl=en&sa=X&ved=2ahUKEwjdsvfqkYaGAx
Wb5DgGHTKbDZkQ4lYoCHoECAEQQg&biw=1468&bih=706#imgrc=vsJ1_EkzNDy3M
M

A popular JavaScript library for building interactive user interfaces is called React. It was
created by Facebook and is well-known for its emphasis on single-page applications and
capacity to produce reusable components.

React follows a one-way data flow for simple tracking of data changes and makes use of a
virtual DOM to maximize the efficiency of UI updates. React is a good option for web
development because of its robust third-party resource and library ecosystem and vibrant
community.

3. Vue.ls.

Figure 31 Vue.js

https://www.google.com/search?q=vue+js&tbm=isch&ved=2ahUKEwiFvJzmlIaGAxVK9qA
CHboQCmgQ2-
cCegQIABAA&oq=v&gs_lp=EgNpbWciAXYqAggBMgoQABiABBhDGIoFMgoQABiAB

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 BhDGIoFMgoQABiABBhDGIoFMgoQABiABBhDGIoFMgoQABiABBhDGIoFMgUQABi
ABDIIEAAYgAQYsQMyCBAAGIAEGLEDMggQABiABBixAzIIEAAYgAQYsQNIrxFQ
kwZYkwZwAHgAkAEAmAG_BaAB-waqAQcwLjEuNi0xuAEByAEA-
AEBigILZ3dzLXdpei1pbWfCAgQQIxgniAYB&sclient=img&ei=GLA_ZoXQM8rsg8UPuq
GowAY&bih=706&biw=1468&hl=en#imgrc=GoHRsGddjGchCM

A progressive JavaScript framework for creating user interfaces is called Vue.js. It is

renowned for being straightforward and simple to use, which makes it a great option for
inexperienced developers.

Bidirectional data binding is used by Vue.js to automatically update the user interface with
changes in application data and vice versa.

Additionally, it offers a succinct and straightforward syntax known as "Directives" that

enables you to add presentation logic straight into HTML. because of its step-by-step
methodology and capacity to design dynamic, responsive user interfaces.

4. Spring.

Figure 32 Spring

https://www.google.com/search?q=spring+boot&tbm=isch&ved=2ahUKEwiN0Zu1lYaGAx
Xp5TgGHRHGA-MQ2-
cCegQIABAA&oq=spring&gs_lp=EgNpbWciBnNwcmluZyoCCAIyBBAjGCcyBBAjGCcy
ChAAGIAEGEMYigUyChAAGIAEGEMYigUyChAAGIAEGEMYigUyChAAGIAEGEM
YigUyDRAAGIAEGLEDGEMYigUyChAAGIAEGEMYigUyChAAGIAEGEMYigUyChA
AGIAEGEMYigVI-
58CUOUHWNNFcAB4AJABAJgB9wKgAZ8OqgEHMC4yLjMuMrgBAcgBAPgBAYoCC
2d3cy13aXotaW1nwgIFEAAYgATCAggQABiABBixA4gGAQ&sclient=img&ei=vrA_Zo3
6HunL4-EPkYyPmA4&bih=706&biw=1468&hl=en#imgrc=gdXvMZ5vpchUQM

Spring is an enterprise application development framework built on Java. It is renowned for

its strong ecosystem of extensions and add-ons, enterprise security support, and modularity.

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 A variety of frameworks, including MVC, data access, and transaction management
frameworks, are available from Spring. Spring, with its emphasis on security and scalability,
is a great option.

5. Laravel.

Figure 33 Laravel

https://www.google.com/search?q=laravel&tbm=isch&ved=2ahUKEwjm1ZP_lYaGAxUz2jg
GHUfGA0AQ2-
cCegQIABAA&oq=l&gs_lp=EgNpbWciAWwqAggBMgQQIxgnMgQQIxgnMgoQABiABB
hDGIoFMgoQABiABBhDGIoFMgoQABiABBhDGIoFMggQABiABBixAzIIEAAYgAQYs
QMyCxAAGIAEGLEDGIoFMggQABiABBixAzIFEAAYgARIux9QrAhYrAhwAHgAkAE
AmAGXDKABghCqAQc0LTEuOC0xuAEByAEA-
AEBigILZ3dzLXdpei1pbWeIBgE&sclient=img&ei=WbE_ZqbFIrO04-
EPx4yPgAQ&bih=706&biw=1468&hl=en#imgrc=fHeziCKd39YztM

The PHP web application framework Laravel is renowned for its sophisticated syntax and
capacity to produce cutting-edge, fast web apps.

Numerous features are available, including support for quick development, database
migrations, and integrated authentication.

Laravel offers a clear framework for developing web applications that adheres to the MVC
paradigm.

6. Ruby.

Figure 34 Ruby

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 https://www.google.com/search?q=ruby+on+rails&tbm=isch&ved=2ahUKEwjk3pnEloaGAx
VP9qACHVXQDccQ2-
cCegQIABAA&oq=ru&gs_lp=EgNpbWciAnJ1KgIIATINEAAYgAQYsQMYQxiKBTIKEA
AYgAQYQxiKBTIFEAAYgAQyCxAAGIAEGLEDGIMBMggQABiABBixAzIFEAAYgA
QyCxAAGIAEGLEDGIMBMggQABiABBixAzIFEAAYgAQyCBAAGIAEGLEDSJseUPsJ
WM0NcAB4AJABAJgBigOgAbEHqgEHMC4xLjAuMrgBAcgBAPgBAYoCC2d3cy13aXot
aW1nwgIEECMYJ4gGAQ&sclient=img&ei=6rE_ZuTBFs_sg8UP1aC3uAw&bih=706&biw
=1468&hl=en#imgrc=MILBv4TzszrH9M

The web development framework Ruby on Rails, or Rails for short, is built on the Ruby
programming language. It is well-known for emphasizing efficiency and simplicity, which
makes it a great option for agile web development.

Rails offers a well-defined framework for developing web applications and adheres to the
MVC paradigm. Rails is a well-liked option for web development in 2024 because of its large
library and toolkit, which prioritize convention over configuration.

7. Flask.

Figure 35 Flask

https://www.google.com/search?q=flask+python&tbm=isch&ved=2ahUKEwic6Ov_loaGAx
Xhm2MGHRnwAAcQ2-
cCegQIABAA&oq=f&gs_lp=EgNpbWciAWYqAggEMgQQIxgnMgQQIxgnMgoQABiABB
hDGIoFMgoQABiABBhDGIoFMgoQABiABBhDGIoFMgoQABiABBhDGIoFMgoQABiA
BBhDGIoFMgoQABiABBhDGIoFMggQABiABBixAzIFEAAYgARIth1QrwdYrwdwAngA
kAEAmAEAoAEAqgEAuAEByAEA-
AEBigILZ3dzLXdpei1pbWeIBgE&sclient=img&ei=Z7I_ZtyYG-
G3juMPmeCDOA&bih=706&biw=1468&hl=en#imgrc=glZ28SmT5Tc5AM

A Python microframework for web development is called Flask. It is renowned for being
straightforward and basic, which makes it a great option for short-term, easy projects.

Flask is an easy-to-integrate library and utility for Python that offers a simple framework for
developing web applications.

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 8. Express.js.

Figure 36 Express js

https://www.google.com/search?q=express+js&tbm=isch&ved=2ahUKEwi-
s8bBl4aGAxVP6DgGHX_ADjwQ2-
cCegQIABAA&oq=expre&gs_lp=EgNpbWciBWV4cHJlKgIIAjIEECMYJzIEECMYJzIKE
AAYgAQYQxiKBTIKEAAYgAQYQxiKBTIKEAAYgAQYQxiKBTIFEAAYgAQyBRAA
GIAEMgUQABiABDIFEAAYgAQyBRAAGIAESIU0UMcHWJ4rcAB4AJABAJgB8AOg
AbULqgEJMC40LjEuMC4xuAEByAEA-
AEBigILZ3dzLXdpei1pbWfCAggQABiABBixA8ICDRAAGIAEGLEDGEMYigXCAgQQ
ABgDiAYB&sclient=img&ei=8bI_Zv72Ds_Q4-
EP_4C74AM&bih=706&biw=1468&hl=en#imgrc=5w0lMSBmzAYvXM

A web application development framework built on Node.js is called Express.js. It is

renowned for being easy to use and for producing scalable, quick online apps.

For web development, Express.js offers a multitude of capabilities and tools, including
middleware management, routing, and support for creating APIs.

Following are the tools used in Web Development.

9. Bootstrap.

Figure 37 Bootstrap

https://www.google.com/search?q=bootstrap&tbm=isch&ved=2ahUKEwinmfGFkIaGAxUt2
zgGHQQbA_8Q2-

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 cCegQIABAA&oq=b&gs_lp=EgNpbWciAWIqAggBMgQQIxgnMgQQIxgnMgoQABiABB
hDGIoFMgoQABiABBhDGIoFMgoQABiABBhDGIoFMggQABiABBixAzIIEAAYgAQYs
QMyCBAAGIAEGLEDMggQABiABBixAzIIEAAYgAQYsQNIqRNQsglYsglwAHgAkAE
AmAHDBKAB3waqAQcyLTEuNS0xuAEByAEA-
AEBigILZ3dzLXdpei1pbWfCAgUQABiABMICBhAAGAcYHsICBhAAGAgYHogGAQ&s
client=img&ei=Has_ZueWBK224-EPhLaM-A8#imgrc=3kPArP9SzRctqM

An open-source, free CSS framework designed for front-end web development that
prioritizes mobile responsiveness is called Bootstrap (previously known as Twitter
Bootstrap). It includes design templates for buttons, forms, typography, navigation, and other
interface elements that are based on HTML, CSS, and (optionally) JavaScript.

With more than 164,000 stars as of May 2023, Bootstrap is GitHub's 17th most starred
project (and 4th most starred library). 19.2% of websites utilize Bootstrap, according to
W3Techs.

10. Google.

Figure 38 Google

https://www.google.com/search?q=google+chrome&tbm=isch&ved=2ahUKEwjynaeam4a
GAxWV7DgGHZZEDZMQ2-
cCegQIABAA&oq=google+&gs_lp=EgNpbWciB2dvb2dsZSAqAggHMgQQIxgnMg0QABiABBix
AxhDGIoFMgoQABiABBhDGIoFMgoQABiABBhDGIoFMg0QABiABBixAxhDGIoFMg0QABiABB
ixAxhDGIoFMgoQABiABBhDGIoFMgoQABiABBhDGIoFMgoQABiABBhDGIoFMgUQABiABEi_I
FDjBljjBnAAeACQAQCYAbcBoAHiAqoBAzAuMrgBAcgBAPgBAYoCC2d3cy13aXotaW1niAYB&
sclient=img&ei=0LY_ZvL1KZXZ4-
EPlom1mAk&bih=706&biw=1468&hl=en#imgrc=HiWmdoyMC04-kM

Google is the company that developed the Chrome web browser. Built using free software
components from Apple Web Kit and Mozilla Firefox, it was initially released in 2008 for
Microsoft Windows. Later, versions were made available for iOS, Linux, macOS, and
Android, where it is the default browser. In ChromeOS, the browser plays a pivotal role as
the platform for web apps.

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 Chrome is licensed as private freeware, while the majority of its source code is derived from
Google's Chromium free and open-source software project. Web Kit was the first rendering
engine, although Google later forked it to produce the Blink engine, which, as of 2017, was
utilized by all Chrome versions save iOS.

11. Github.

Figure 39 Github

https://www.google.com/search?q=github&tbm=isch&ved=2ahUKEwjOiIGem4aGAxU45Dg
GHQgAAssQ2-
cCegQIABAA&oq=git&gs_lp=EgNpbWciA2dpdCoCCAEyChAAGIAEGEMYigUyDRAAGIAEGLE
DGEMYigUyChAAGIAEGEMYigUyChAAGIAEGEMYigUyChAAGIAEGEMYigUyChAAGIAEGEMYi
gUyChAAGIAEGEMYigUyChAAGIAEGEMYigUyChAAGIAEGEMYigUyBRAAGIAESNFNUJsJWJYz
cAB4AJABAJgBhBqgAfdIqgEFOC0xLjO4AQHIAQD4AQGKAgtnd3Mtd2l6LWltZ8ICBBAjGCfCAg
gQABiABBixA4gGAQ&sclient=img&ei=2LY_Zs68G7jI4-
EPiICI2Aw&bih=706&biw=1468&hl=en#imgrc=OykTgE0lCGVs6M

Developers can write, store, manage, and share code via the GitHub platform. It makes use of
Git software, which offers wikis for each project along with access control, bug tracking,
software feature requests, task management, continuous integration, and distributed version
control. With its main office located in California, it joined Microsoft as a subsidiary in 2018.

Open-source software development projects are frequently hosted on it. Over 100 million
developers and over 420 million repositories, including at least 28 million public repositories,
were listed as of January 2023 on GitHub. As of June 2023, it is the largest source code host
in the world.

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 12. Visual Studio Code.

Figure 40 Visual Studio Code

https://www.google.com/search?q=visual+studio+code&tbm=isch&ved=2ahUKEwjm8K-
CnIaGAxXk2zgGHYFoDE4Q2-
cCegQIABAA&oq=vis&gs_lp=EgNpbWciA3ZpcyoCCAAyChAAGIAEGEMYigUyChAAGIAEGEM
YigUyChAAGIAEGEMYigUyChAAGIAEGEMYigUyChAAGIAEGEMYigUyCBAAGIAEGLEDMggQA
BiABBixAzIIEAAYgAQYsQMyBRAAGIAEMggQABiABBixA0iXJ1DiCVidG3AAeACQAQCYAewUo
AHdN6oBAzktM7gBAcgBAPgBAYoCC2d3cy13aXotaW1nwgIEECMYJ8ICCxAAGIAEGLEDGIoFi
AYB&sclient=img&ei=qrc_ZubzOOS34-
EPgdGx8AQ&bih=706&biw=1468&hl=en#imgrc=n53GiATSTAEQxM

Microsoft created Visual Studio Code, popularly known as VS Code, which is a source-code
editor compatible with Windows, Linux, macOS, and web browsers. Debugging, syntax
highlighting, intelligent code completion, snippets, code refactoring, and integrated Git
version control are among the features. Users have the ability to modify the theme, keyboard
shortcuts, preferences, and install functional extensions.

According to 86,544 respondents in the Stack Overflow 2023 Developer Survey, Visual
Studio Code is the most widely used developer environment tool, with 73.71% of
respondents saying they use it.

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 13. Angular.

Figure 41 Angular

https://www.google.com/search?q=angular&tbm=isch&ved=2ahUKEwiAppqFlIaGAxU45D
gGHQgAAssQ2-
cCegQIABAA&oq=ang&gs_lp=EgNpbWciA2FuZyoCCAEyBBAjGCcyChAAGIAEGEMY
igUyChAAGIAEGEMYigUyChAAGIAEGEMYigUyChAAGIAEGEMYigUyChAAGIAEG
EMYigUyDRAAGIAEGLEDGEMYigUyBRAAGIAEMggQABiABBixAzIIEAAYgAQYs
QNIshdQ-QZYhQ1wBHgAkAEAmAEAoAEAqgEAuAEByAEA-
AEBigILZ3dzLXdpei1pbWeIBgE&sclient=img&ei=Ta8_ZsDLF7jI4-
EPiICI2Aw&bih=706&biw=1468&hl=en#imgrc=G48fTm7qth7dNM

The Angular framework is designed to construct sophisticated web apps using TypeScript. It
is renowned for its strength and sophisticated features, which include dependency injection,
form management, and routing.

The MVC (Model-View-Controller) design pattern is used by Angular, which offers a strong
and clear framework for developing online applications.

Angular is a well-liked option for web development due to its abundance of features and ease
of use in creating complicated apps.

14. Jquery.

Figure 42 Jquery

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 https://www.google.com/search?q=jquery&tbm=isch&ved=2ahUKEwiM_KaynYaGAxXh6D
gGHY9OB-4Q2-
cCegQIABAA&oq=jquery&gs_lp=EgNpbWciBmpxdWVyeTIEECMYJzIKEAAYgAQYQxiKBTIKEA
AYgAQYQxiKBTIKEAAYgAQYQxiKBTIKEAAYgAQYQxiKBTIFEAAYgAQyBRAAGIAEMgUQABiAB
DIFEAAYgAQyBRAAGIAESOtmUNcNWIdfcAB4AJABAJgBih6gAYYmqgELMC4xLjYtMS45LTG4
AQPIAQD4AQGKAgtnd3Mtd2l6LWltZ8ICEBAAGIAEGLEDGEMYgwEYigXCAggQABiABBixA4g
GAQ&sclient=img&ei=G7k_ZsyCNuHR4-
EPj52d8A4&bih=706&biw=1468&hl=en#imgrc=QyWQbjC2eR2b4M

Ajax, CSS animations, event handling, and HTML DOM tree traversal and manipulation are
all made easier with the help of the JavaScript library jQuery. The software is open-source
and free, licensed under the permissive MIT License. Seventy-seven percent of the 10 million
most popular websites as of August 2022 use jQuery. According to web statistics, it is at least
three or four times more frequently used than any other JavaScript library, making it by far
the most widely used JavaScript library.

The syntax of jQuery is intended to simplify document navigation, DOM element selection,
animation creation, event handling, and Ajax application development. Additionally, jQuery
gives programmers the ability to build plug-ins on top of the JavaScript library. Because of
this, programmers can construct abstractions for low-level interaction and animation,
sophisticated effects, and sophisticated widgets that may be themed. The jQuery library's
modular design enables the development of robust dynamic webpages and online apps.

15. Sass.

Figure 43 Sass

https://www.google.com/search?q=sass&tbm=isch&ved=2ahUKEwjOpZrUnoaGAxV53zgG
HdoZD00Q2-
cCegQIABAA&oq=sa&gs_lp=EgNpbWciAnNhKgIIADIEECMYJzIEECMYJzIKEAAYgAQYQxiKBTI
OEAAYgAQYsQMYgwEYigUyBRAAGIAEMgUQABiABDIIEAAYgAQYsQMyCBAAGIAEGLEDMgU
QABiABDIFEAAYgARImihQzBZY6RtwAXgAkAEBmAGlA6ABiAaqAQcwLjIuNC0xuAEByAEA-

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 AEBigILZ3dzLXdpei1pbWeoAgrCAgcQIxgnGOoCiAYB&sclient=img&ei=b7o_Zo6yGfm-4-
EP2rO86AQ&bih=706&biw=1468&hl=en#imgrc=JnziV3cAbSTfDM

Syntactically awesome style sheets, or Sass for short, is a preprocessor scripting language
that may be compiled or interpreted to create Cascading Style Sheets (CSS). The scripting
language itself is called SassScript.

Two syntaxes make up Sass. The original syntax, referred to as "the indented syntax," is
HTML-like. Code blocks are separated using indentation, and rules are separated using
newline characters. Block formatting is similar to that of CSS in the more recent syntax,
SCSS (Sassy CSS). Code blocks are indicated with braces, and rules within a block are
divided using semicolons. The extensions. Sass and. scss are typically used for SCSS files
and indented syntax, respectively.

16. React

Figure 44 React

https://www.google.com/search?q=react+js&tbm=isch&ved=2ahUKEwj7pvnYn4aGAxXQm
2MGHQlaCK0Q2-
cCegQIABAA&oq=r&gs_lp=EgNpbWciAXIqAggBMgQQIxgnMgQQIxgnMgoQABiABBhDGIoF
MgoQABiABBhDGIoFMgoQABiABBhDGIoFMgoQABiABBhDGIoFMgoQABiABBhDGIoFMgoQ
ABiABBhDGIoFMgoQABiABBhDGIoFMgoQABiABBhDGIoFSLwdUP8MWP8McAB4AJABAJgB
wAGgAfMCqgEDMC4yuAEByAEA-
AEBigILZ3dzLXdpei1pbWeIBgE&sclient=img&ei=hbs_ZrvQMNC3juMPibSh6Ao&bih=706&bi
w=1468&hl=en#imgrc=ZCYIrna6BmgdWM&imgdii=m4kSho0KNPwx-M

React is a free and open-source front-end JavaScript toolkit for creating component-based
user interfaces. It is also referred to as React.js or ReactJS. It is maintained by a group of
independent developers and businesses as well as Meta (previously Facebook).

Using frameworks like Next.js, React may be used to create server-rendered, mobile, and

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 single-page applications. React apps frequently rely on libraries for routing and other client-
side functionality because React is primarily focused on the user experience and rendering
components to the DOM. React's ability to render only the portions of the page that have
changed—avoid rendering unmodified DOM elements twice—is one of its main advantages.

17. Django.

Figure 45 Django

https://www.google.com/search?q=django+technology&tbm=isch&ved=2ahUKEwilhezkiYa
GAxXm7DgGHXusB5wQ2-
cCegQIABAA&oq=django+tec&gs_lp=EgNpbWciCmRqYW5nbyB0ZWMqAggBMgUQA
BiABDIFEAAYgAQyBxAAGIAEGBgyBxAAGIAEGBhIj2ZQqStYmlxwAngAkAEAmAG
LBKAB9wuqAQswLjEuMi4xLjAuMbgBAcgBAPgBAYoCC2d3cy13aXotaW1nwgIEECM
YJ8ICChAAGIAEGEMYigWIBgE&sclient=img&ei=jaQ_ZuWKCubZ4-EP-
9ie4Ak#imgrc=h4_pgC0NvWn_aM

Written in Python, Django is a very feature-rich and well-known server-side web framework.
This module explains how to set up a development environment, why Django is one of the
most well-liked web server frameworks, and how to get started with building your own
online apps.

18. Ruby.

Figure 46 Ruby

https://www.google.com/search?q=ruby+on+rails&tbm=isch&ved=2ahUKEwjk3pnEloaGAx
VP9qACHVXQDccQ2-
cCegQIABAA&oq=ru&gs_lp=EgNpbWciAnJ1KgIIATINEAAYgAQYsQMYQxiKBTIKEA

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 AYgAQYQxiKBTIFEAAYgAQyCxAAGIAEGLEDGIMBMggQABiABBixAzIFEAAYgA
QyCxAAGIAEGLEDGIMBMggQABiABBixAzIFEAAYgAQyCBAAGIAEGLEDSJseUPsJ
WM0NcAB4AJABAJgBigOgAbEHqgEHMC4xLjAuMrgBAcgBAPgBAYoCC2d3cy13aXot
aW1nwgIEECMYJ4gGAQ&sclient=img&ei=6rE_ZuTBFs_sg8UP1aC3uAw&bih=706&biw
=1468&hl=en#imgrc=MILBv4TzszrH9M

The web development framework Ruby on Rails, or Rails for short, is built on the Ruby
programming language. It is well-known for emphasizing efficiency and simplicity, which
makes it a great option for agile web development.

Rails offers a well-defined framework for developing web applications and adheres to the
MVC paradigm. Rails is a well-liked option for web development in 2024 because of its large
library and toolkit, which prioritize convention over configuration.

19. Laravel.

Figure 47 Laravel

https://www.google.com/search?q=laravel&tbm=isch&ved=2ahUKEwjm1ZP_lYaGAxUz2jg
GHUfGA0AQ2-
cCegQIABAA&oq=l&gs_lp=EgNpbWciAWwqAggBMgQQIxgnMgQQIxgnMgoQABiABB
hDGIoFMgoQABiABBhDGIoFMgoQABiABBhDGIoFMggQABiABBixAzIIEAAYgAQYs
QMyCxAAGIAEGLEDGIoFMggQABiABBixAzIFEAAYgARIux9QrAhYrAhwAHgAkAE
AmAGXDKABghCqAQc0LTEuOC0xuAEByAEA-
AEBigILZ3dzLXdpei1pbWeIBgE&sclient=img&ei=WbE_ZqbFIrO04-
EPx4yPgAQ&bih=706&biw=1468&hl=en#imgrc=fHeziCKd39YztM

The PHP web application framework Laravel is renowned for its sophisticated syntax and
capacity to produce cutting-edge, fast web apps.

Numerous features are available, including support for quick development, database
migrations, and integrated authentication.

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 Laravel offers a clear framework for developing web applications that adheres to the MVC
paradigm.

20. Vue.ls.

Figure 48 Vue.js

https://www.google.com/search?q=vue+js&tbm=isch&ved=2ahUKEwiFvJzmlIaGAxVK9qA
CHboQCmgQ2-
cCegQIABAA&oq=v&gs_lp=EgNpbWciAXYqAggBMgoQABiABBhDGIoFMgoQABiAB
BhDGIoFMgoQABiABBhDGIoFMgoQABiABBhDGIoFMgoQABiABBhDGIoFMgUQABi
ABDIIEAAYgAQYsQMyCBAAGIAEGLEDMggQABiABBixAzIIEAAYgAQYsQNIrxFQ
kwZYkwZwAHgAkAEAmAG_BaAB-waqAQcwLjEuNi0xuAEByAEA-
AEBigILZ3dzLXdpei1pbWfCAgQQIxgniAYB&sclient=img&ei=GLA_ZoXQM8rsg8UPuq
GowAY&bih=706&biw=1468&hl=en#imgrc=GoHRsGddjGchCM

A progressive JavaScript framework for creating user interfaces is called Vue.js. It is

renowned for being straightforward and simple to use, which makes it a great option for
inexperienced developers.

Bidirectional data binding is used by Vue.js to automatically update the user interface with
changes in application data and vice versa.

Additionally, it offers a succinct and straightforward syntax known as "Directives" that

enables you to add presentation logic straight into HTML. because of its step-by-step
methodology and capacity to design dynamic, responsive user interfaces.

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 b. Justify the tools and techniques chosen to realize a custom-built
website.

Why do we use the following tools in Web Development.

1. Bootstrap.

• It makes coding breeze.

• It has a customizable page element.
• It incorporates responsive design element.
• It allows to make pages quickly.
• It allows you to add visual component.
• It focuses on the user.
• It provides you with support.
• It has mobile- first approach.
• It is compatible with some browsers.

2. Github.

• GitHub allows you to create, store, change, merge, and collaborate on files or code.
• Any member of a team can access the GitHub repository (think of this as a folder for
files) and see the most recent version in real-time.
• Then, they can make edits or changes that the other collaborators also see.

3. Visual Studio Code.

• Visual Studio Code is a streamlined code editor with support for development
operations like debugging, task running, and version control.
• It aims to provide just the tools a developer needs for a quick code-build-debug
cycle and leaves more complex workflows to fuller featured IDEs, such as Visual
Studio Code.

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 4. Angular.

• Supported by google.
• TypeScript.
• Declarative UI.
• Plain Old JavaScript Object.
• Simplified MVC pattern.
• Modular structure.
• Code consistency and easy testing.

5. Jquery.

• Because it offers a JavaScript library that makes it easier to create JavaScript apps for
every browser, jQuery is an essential tool for web developers.
• It makes it possible for developers to create less code and conduct less testing.

6. Sass.

• Sass is a potent web development tool that enables programmers to write CSS code
that is more effective and manageable.
• By utilizing Sass's features such as variables, nesting, mixins, and functions you can
create styles faster and more effortlessly while maintaining the modularity and
organization of your code.

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 Task 2.

1.3 Define the relationships between front-end and back-end

website technologies and explain how the front-end and the
back-end relate to presentation and application layers.

a. Discuss the capabilities and relationships between front-end and back-

end website technologies and explain how these relate to presentation
and application layers.

1.2.1 Front-end Development.

Figure 49 Frontend

https://www.google.com/search?q=front+end+development&tbm=isch&ved=2ahUKEwjLkf
CYkYaGAxWK2zgGHZhaAX8Q2-
cCegQIABAA&oq=fr&gs_lp=EgNpbWciAmZyKgIIADIEECMYJzIKEAAYgAQYQxiKBT
IKEAAYgAQYQxiKBTIIEAAYgAQYsQMyCBAAGIAEGLEDMgUQABiABDIIEAAYg
AQYsQMyCBAAGIAEGLEDMgUQABiABDIIEAAYgAQYsQNIzSZQ9glYkhxwAHgAk
AEAmAGzAqAB-QWqAQcwLjEuMS4xuAEByAEA-
AEBigILZ3dzLXdpei1pbWeIBgE&sclient=img&ei=Uaw_ZoulFIq34-EPmLWF-
Ac#imgrc=-UQ4VoWR8na39M
The process of creating a website's graphical user interface (GUI) is known as front-end web
development. Front-end development, also known as client-side development, is the process

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 of creating the user-interactive elements of a website, like text fields and buttons. Front-end
development is often done with HTML, CSS, and JavaScript.

If we take a look at the Facebook login page, the front end of the website includes the images
on the page as well as the text boxes where you may input your password and email address.
The back end of the website handles the authentication that takes place when you enter your
information and click the login button.

1.2.2 Back-end Development.

Figure 50 Backend

https://www.google.com/search?q=back+end+development&tbm=isch&ved=2ahUKEwjv0M
X5joaGAxVm3zgGHa_KA24Q2-
cCegQIABAA&oq=b&gs_lp=EgNpbWciAWIqAggBMgQQIxgnMgQQIxgnMgoQABiABB
hDGIoFMgoQABiABBhDGIoFMgoQABiABBhDGIoFMgoQABiABBhDGIoFMg0QABiA
BBixAxhDGIoFMgoQABiABBhDGIoFMgoQABiABBhDGIoFMggQABiABBixA0inHFD
xDVjxDXAAeACQAQCYAZoCoAHcA6oBBTAuMS4xuAEByAEA-
AEBigILZ3dzLXdpei1pbWeIBgE&sclient=img&ei=9qk_Zu_9Lea-4-
EPr5WP8AY#imgrc=i0Ny829PSB_f4M

Working on server-side software, which focuses on everything you can't see on a website, is
known as back-end development. With an emphasis on databases, back-end logic, application
programming interfaces (APIs), architecture, and servers, back-end developers make sure the
website operates as intended. They make use of code that facilitates browser-DB
communication as well as data storage, comprehension, and deletion.

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 To create the framework of a website or mobile application, back-end developers work in
tandem with front-end developers, product managers, primary architects, and website testers.
Python, Java, Ruby, and other programming languages are just a few of the many tools and
frameworks that back-end engineers need to be conversant with. They ensure that in response
to requests from front-end users, the back-end operates swiftly and efficiently.

1.2.3 Relationship between front- end and back- ends.

Following are the relationship between front- end and back- end:

• A web application is coherent when its frontend and backend are working together.
While the backend processes requests, retrieves or saves data, and executes
computations, the frontend communicates with users, gathers input, and displays
information.

• HTTP requests are used by the frontend and backend to exchange data, usually
through the use of APIs (Application Programming Interfaces). These requests are
processed by the backend, which also carries out any required actions before
returning the results to the frontend for display or additional handling.

• Because frontend and backend code can be built, tested, and maintained separately,
modular development—which fosters collaboration among developers with varying
specializations—is made possible by this division of labor.

• All things considered, frontend and backend are distinct layers of web development,
each with its own set of duties, tools, and difficulties collaborating to provide user-
friendly web applications and a smooth user experience.

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 1.2.4 How front- end and back- end relate to presentation and application
layer.

Together, front-end and back-end technologies produce a whole website. Between the
presentation and application layers, they transmit data and functionality via APIs
(Application Programming Interfaces).

• APIs: These specify the interfaces through which back-end and front-end
technologies can communicate. They offer a collection of guidelines and procedures
for sharing information and features. To get data from a database, for instance, front-
end JavaScript code can send an API call to the back-end server.

• Data Exchange: User input and requests can be sent to the back end for processing
by front-end technology. The requested data is then provided by the back-end, which
also takes any other necessary steps. User experiences that are tailored to each
individual are made possible by this data interchange.

• Separation of Concerns: This idea is adhered to by front-end and back-end

technologies. Data processing and business logic are handled by the back-end, while
the front-end concentrates on the user interface and presentation. Maintenance is
made easier by this division both scalability and developer cooperation.

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 2.3 Critically compare the different between online website
creation tools and custom-built sites. Consider Followings:
design flexibility, performance, functionality, User
Experience (UX) and User Interface (UI).

a. Discuss the differences between online website creation tools and

custom-built sites with regards to design flexibility, performance,
functionality, User Experience (UX) and User Interface (UI).

2.2.1 Online Website creational tools.

Following are the Online Website creational tools.

• WordPress.
• Adobe Dreamweaver.
• Figma.
• Shopify.
• Canva.

2.2.2 Custom built Website.

Following are the Custom-built Website.

• Adobe XD.
• Adobe Photoshop.
• Design.
• Canva.
• Marvel.

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 2.2.3 The differences between Online Website creational tools and Custom-
built tools.

Aspects. Online Website Creational Custom Built Tools

Tools.
• Design flexibility. • Limited freedom in • High degree of design
terms of design because flexibility: Since
they provide pre-made websites may be created
themes and templates from the ground up,
with possible limits on layout, components of
personalization. Within design, and functionality
preset parameters, users can all be fully
may have some control customized to meet
over fonts, colors, and unique needs. Pre-
layout. designed templates don't
limit your creative
options.
• Performance. • The intricacy of the • Depending on the
website and the hosting available resources and
platform can have an particular requirements,
impact on performance. performance can be
There can be restrictions optimized. It is possible
on performance to optimize custom-built
optimization for certain websites for optimum
online website builders. performance, which
includes scalability,
rapid loading times, and
effective code execution.

• Functionality. • The website builder • Functionality can be

platform's features and modified to satisfy
plugins are the extent of certain demands and

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 its functionality. Basic specifications. Without
capabilities like image being constrained by the
galleries, blog website builder platform,
integration, and contact custom-built websites
forms might be available can incorporate complex
to users, while more functions, third-party
complex functions might APIs, and unique
call for extra plugins or features.
custom development.

• User Experience (UX) • Depending on the caliber • It is possible to optimize

of the themes and the user experience for
templates the website accessibility, easy
builder platform offers, navigation, and simple
the user experience interaction. Tailored user
could differ. Some experiences based on
platforms may have UX design concepts,
usability problems or usability testing, and
limits, while others user research are
prioritize having user- possible with custom-
friendly interfaces. built websites.

• User Interface (UI) • The website builder • User interfaces can be

platform's design created from the ground
templates and themes are up to conform to user
the only alternatives preferences, visual
available for the user identity standards, and
interface. Buttons, branding rules. All UI
menus, and navigation design control is
bars are examples of UI provided by custom-built
elements over which websites, which enable
users may have some the creation of
customization, albeit distinctive and creative

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 within preset layouts and interfaces catered to
styles. particular requirements
and target audience
preferences.

Compare and contrast the tools and techniques available to

design and develop a custom-built web application for
Malcome and Lismore. Select the most suitable tools,
techniques and justify your selection with valid reasons.

b. Analyse a range of tools and techniques available to design and

develop a custom-built website.

Aspects. Malcome’s Custom Built Lismore’s Custom Built

Web Application. Web Application.
• Target Audience. • The online • The web application
application from developed by
Malcome caters to Lismore caters to a
tech-savvy wide range of users,
consumers who need including those with
cutting-edge differing tastes and
functionality and degrees of
design. technological
proficiency.

• Development Team. • The team at • Developers from a

Malcome is made up variety of
of seasoned backgrounds and
developers who are skill sets make up
knowledgeable Lismore's team,

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 about the newest which prioritizes
frameworks and accessibility and
technologies for web user-centric design.
development.

• Front- end • Malcome's web • The web application

Technology. application creates developed by
dynamic, interactive Lismore places a
user interfaces with high priority on
the help of usability and
contemporary accessibility. To
frontend guarantee cross-
technologies like browser and device
React.js and Vue.js. compatibility,
frontend frameworks
such as Angular or
vanilla JavaScript
are used.

• Back- end • To manage intricate • Lismore's backend

Technology. data processing and provides safe and
server-side logic, effective server-side
Malcome's backend functionality by
is constructed leveraging
utilizing scalable dependable
and reliable frameworks like
technologies like ASP.NET (C#),
Node.js, Python Express.js (Node.js),
Django, or Ruby on or Spring Boot
Rails. (Java).

• Database • For effective data • Data integrity and

Management. storage and retrieval, scalability are

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 Malcome's online ensured by
application uses Lismore's web
cutting-edge application's
database integration with
management dependable
systems like databases like
MongoDB, PostgreSQL,
PostgreSQL, or MySQL, or
MySQL. Microsoft SQL
Server.

• DevOps And • Using tools like • To provide smooth

Deployment. Docker, Kubernetes, deployment and
or AWS Elastic version control,
Beanstalk for Lismore's
containerization, deployment
automation, and approach comprises
continuous CI/CD pipelines
deployment, with tools like
Malcome's team Jenkins, GitLab CI,
adheres to DevOps or GitHub Actions.
methods.

• User Interface Design • Malcome's UI • Accessibility and

(UI). design is centered on usability are given
contemporary first priority in
aesthetics, and it Lismore's UI design,
makes use of design which makes use of
software such as programs like
Adobe XD, Figma, Marvel, InVision,
and Sketch to and Axure RP to
produce visually produce user-
friendly interfaces

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 appealing layouts with simple
and prototypes. navigation and
natural interactions.

• Testing And Quality • Using frameworks • Using technologies

Assurance. like Jest, Mocha, or like BrowserStack,
Selenium, Google Lighthouse,
Malcome's team or Axe for
conducts thorough automated
testing approaches accessibility testing,
such as unit testing, Lismore's quality
integration testing, assurance process
and end-to-end places a strong
testing. emphasis on
usability,
accessibility, and
performance testing.

• Security and • Using frameworks • Lismore's web

Compliance like OAuth, JWT, or application places a
OpenID Connect, high priority on data
Malcome's online privacy and security.
application To comply with
incorporates strong legal requirements
security features and safeguard user
including data, it has included
encryption, encryption
authentication, and techniques, secure
authorization. It is authentication
guaranteed to methods, and
comply with frequent security
industry standards assessments.

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 such as GDPR and
HIPAA.

Following are the most suitable tools, techniques and justify with valid reasons.

2.2.4 Malcome’s Custom Built Web Application.

2.2.4.1 Front- end Technology.

Whether using React.js or Vue.js, you can create dynamic and interactive user interfaces that
are highly capable of meeting Malcome's demands for cutting-edge functionality and design.
Because of its component-based architecture, which promotes modularity and scalability,
new features may be added with ease and quick development is made possible.

2.2.4.2 Back- end Technology.

Using Express.js with Node.js: Because of its event-driven, non-blocking architecture,

Node.js is suited for managing high-performance, real-time applications. When combined
with Express.js, it provides a flexible and lightweight backend framework that helps
Malcome's team to swiftly design intricate server-side logic.

2.2.4.3 Database Management.

MongoDB: MongoDB is a NoSQL database that provides scalability and flexibility to meet
Malcome's web application's dynamic data requirements. Its document-based model makes it
simple to store and retrieve data structures that resemble JSON, which speeds up
development and iteration.

2.2.4.4 Dev Ops and Deployment.

Docker and Kubernetes: The deployment process is streamlined by Docker containers, which
offer consistency and portability across development, testing, and production environments.
Malcome's emphasis on contemporary development techniques is in line with Kubernetes'

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 orchestration of containerized applications, which guarantees scalability, fault tolerance, and
effective resource use.

2.2.4.5 User Interface (UI) Design.

Sketch or Figma: These design programs have a lot of capabilities that help you make UI
designs and prototypes that look good. Their capacity for collaboration makes it easier for
team members to communicate and provide feedback to one another, allowing for iterative
design improvements based on input from stakeholders and users.

2.2.4.6 Testing and Quality Assurance.

For unit testing, use Jest; for end-to-end testing, use Cypress. Jest is a feature-rich testing
framework for JavaScript apps that includes mocking and snapshot testing. Cypress enables
effective end-to-end testing of web apps, guaranteeing that they operate and perform to
Malcome's exacting requirements.

2.2.4.7 Security and Compliance.

Using JWT for authorization and OAuth for authentication Users can utilize their existing
accounts on well-known platforms to access Malcome's web application thanks to safe
authentication techniques provided by OAuth. A stateless, token-based solution to
authorization is provided by JWT (JSON Web Tokens), guaranteeing safe access control and
safeguarding private user information.

Malcome Justification.

Malcome places a strong emphasis on innovation, cutting-edge design, and high-performance

functionality, therefore the tools and methods they've chosen provide the adaptability,
scalability, and efficiency needed to achieve their goals. With the help of cutting-edge front-
and back-end technologies, reliable database management systems, and best practices in
security, testing, DevOps, and UI design, Malcome can create a unique web application that
surpasses user expectations and gives it a competitive advantage in the market.

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 2.2.5 Lismore’s Custom Build Web Application.

2.2.5.1 Front- end Technology.

Angular: Angular offers a complete framework for creating dependable, large-scale online
applications. Lismore's requirement for accessibility and usability is well-aligned with its
opinionated structure and built-in features, which provide consistency, maintainability, and
scalability.

2.2.5.2 Back- end Technology.

Java Spring Boot: This framework provides a strong convention-over-configuration method

for backend development, allowing online applications to be quickly prototyped and
deployed. For Lismore's large audience, dependability, security, and performance are crucial,
and these are ensured by its vast ecosystem and community support.

2.2.5.3 Database Management.

Reliability, scalability, and extensibility are hallmarks of the established open-source

relational database management system PostgreSQL. The web application developed by
Lismore can effectively handle a variety of data requirements thanks to its support for
complex data types, transactions, and ACID compliance.

2.2.5.4 DevOps and Deployment.

Jenkins for Deployment and Continuous Integration (CI): A reliable CI/CD pipeline for
automating build, test, and deployment procedures is offered by Jenkins. Because of its
flexibility and extensibility, Lismore's development workflow can be integrated with a wide
range of tools and platforms, facilitating effective deployment and version control.

2.2.5.5 User Interface (UI) Design.

Axure RP: With Axure RP's sophisticated wireframing and prototyping features, designers
can produce UI designs that are both interactive and readable. Its emphasis on teamwork and
usability testing makes it easier to create user-friendly interfaces that are suitable for
Lismore's broad user base.

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 2.2.5.6 Testing & Quality Assurance.

BrowserStack for Cross-Browser Testing: This cloud-based platform allows web applications
to be tested across a variety of devices and browsers to guarantee consistency and
compatibility in the user experience. Because of its automated testing features, Lismore's web
application can be thoroughly tested while streamlining the quality assurance process.

2.2.5.7 Security & Compliances.

OWASP and SSL/TLS Encryption as Security Best Practices: Data security and privacy are
given first priority in Lismore's web application, which uses SSL/TLS encryption to
safeguard data while it is in transit. By adhering to industry norms and laws, using OWASP
(Open Web Application Security Project) best practices helps protect user data from security
risks.

Lismore Justification.

The technologies and approaches chosen provide strong answers for creating a web
application that is specifically tailored to Lismore's needs, taking into account their broad
audience as well as their emphasis on accessibility and usability. Using best practices in
DevOps, UI design, testing, and security along with Angular for front-end development,
Spring Boot for back-end development, PostgreSQL for database management, Lismore can
create a web application that meets the demands of their wide user base and offers a smooth
user experience.

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 3.1 Design a suitable web application solution for the given
scenario. Provide evidences of the design, multipage website
supported with fidelity wireframes and a full set of client and user
requirements.

a. Create a design document for a branded, multipage website supported with

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

3.1.1 Client and User Requirement.

3.1.1.1 Functional Requirement.

Login:

Users must be able to sign into the system by entering their username and password in the
login module.

Registration:
The front desk staff members have access to add new member and their data to the database
thanks to permission from the free-lancing photography management.

Authentication:
The HMS gives front desk staff the ability to create a unique ID for every member, which is
then placed to the member's record sheet. The member can use the ID during their whole
stay in the photography.

Member Information:
The photography administration system creates a report for every member that includes the
member's ID, name (first and surname), address, phone number, and photography history.

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 Update member information: Users of the photography system are able to update
photographer information, including photograph bills and records of their photography
history.

Delete member information: If a user makes a mistake, the photography system allows
them to delete the photographer's information.

Member update report: The system should enable photographers to read photographer
records and submit any necessary photographic advice.

3.1.1.2 Non- Functional Requirement.

Availability: The system must be accessible round the clock.

Capacity: The system must be able to handle many users.

Performance: A web page shouldn’t take more than 5 second to load while using a 56Kbps
modem connection.

User Interface: A reaction time of 5 second is required for user interface displays.

Security: Firewalls must be activated, and an active Anti- virus must be running.

Modification: Only the admin is responsible for planning and carrying out system
modifications such as insert, remove and update.

Accessibility: The administrator and the other user who has registered can access the
system but each user controls the amount of access.

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 3.1.2 Wireframes.

What is a Wireframe.

One method for designing a website service at the structural level is wireframing. When
organizing functionality and content on a website, wireframes are frequently used to consider
user journeys and needs. Early in the development process, wireframes are used to define a
page's basic structure before visual design and content are added. (Sometimes questions are
more important than answers, n.d.)

Wireframe focuses in:

• A framework for concentrating on page architecture and conversion channels is
provided by wireframes.

• Drafting and making changes in a highly visual, yet instantly adjustable wireframe is
significantly simpler (and, eventually, faster) than doing it after the design process has
started.

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 3.3 Implement the designed system using PHP, JS and MySQL.
Screenshots of important code lines with proper comments and
user interfaces filled with sample data must be attached to the
documentation.

1. Home Page Wireframe

Exploring the website design and functionalities.

Content
• Home page.
• Registration page.
• Gallery.
• Price listing.
• More Bookings (etc…)

Home page.

Because the home page design is often the first thing a client sees when visiting a website,
most designers concentrate on it.

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 Figure 51 Home page wireframe

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 Home page.

Figure 52 Home Page

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

 HTML Code.

Figure 53 Home page HTML

Sajidha Rimzi | Unit 13: Web Design and Development| Assignment 01

Gallery.

Figure 54 Gallery Wireframe

Akmal Faham COL 001509654

UNIT 10 WDD ASSIGNMENT 01 ESOFT Metro Campus

Gallery.

Figure 55 Gallery

Akmal Faham COL 001509654

UNIT 10 WDD ASSIGNMENT 01 ESOFT Metro Campus

HTML Code.

Figure 56 Gallery HTML

Akmal Faham COL 001509654

UNIT 10 WDD ASSIGNMENT 01 ESOFT Metro Campus

 About page.
The photographer's motivation, method of operation, and further photographic details may all
be found on this about page.

Figure 57 About Us Page

Akmal Faham COL 001509654

UNIT 10 WDD ASSIGNMENT 01 ESOFT Metro Campus

About Us Page.

Figure 58 About Us Page

Akmal Faham COL 001509654

UNIT 10 WDD ASSIGNMENT 01 ESOFT Metro Campus

HTML Code.

Figure 59 About Us HTML

Akmal Faham COL 001509654

UNIT 10 WDD ASSIGNMENT 01 ESOFT Metro Campus

More Bookings and Details.

Figure 60 More Bookings and details

Akmal Faham COL 001509654

UNIT 10 WDD ASSIGNMENT 01 ESOFT Metro Campus

More Bookings and details.

Figure 61 More Bookings and Details

Akmal Faham COL 001509654

UNIT 10 WDD ASSIGNMENT 01 ESOFT Metro Campus

 HTML Code.

Figure 62 More Bookings and more details

Akmal Faham COL 001509654

UNIT 10 WDD ASSIGNMENT 01 ESOFT Metro Campus

 Apply a database design for the proposed system and provide the
well normalized database design of the proposed system.

Database design for the Contact Page.

A web form that lets users contact you with inquiries, suggestions, or requests is called a
"contact us" form.

An easy-to-use interface is offered by phpMyAdmin for exporting database(s).

When a client submits their request, the database is able to store the information and export it
as needed.

Figure 63 phpMyAdmin

Akmal Faham COL 001509654

UNIT 10 WDD ASSIGNMENT 01 ESOFT Metro Campus

Figure 64 Database Table

Figure 65 Register details

Akmal Faham COL 001509654

UNIT 10 WDD ASSIGNMENT 01 ESOFT Metro Campus

 Critically evaluate the web design and development process
against your design document and analyze any technical
challenges you faced in development.

Homepage Design and Navigation:

Evaluation: The homepage has clear navigation, an eye-catching design, and an effective
way of conveying the goal of the website.
Technical Challenges: The homepage's implementation presented no particularly difficult
technical obstacles.

Malcolm Page

Evaluation: The "About Malcolm" section offers valuable details regarding the
photographer's background and enthusiasm for photography.
Technical Challenges: The creation of this content-rich page presented no significant
technical difficulties.

Pricing Information:

Evaluation: The pricing page does a good job of presenting the costs associated with various
photography services.

Technological Challenges: The organization and presentation of the pricing data did not
offer any noteworthy technological difficulties.

Photography Gallery:

Evaluation: Malcolm's photography is effectively displayed in the gallery, which offers a

captivating user experience.

Akmal Faham COL 001509654

UNIT 10 WDD ASSIGNMENT 01 ESOFT Metro Campus

Technical Challenges: Creating the gallery with room for future expansions presented some
technical difficulties.
Thorough optimization was necessary to guarantee scalability and sustain load times for huge
image collections.

Enquiry Form:

Evaluation: Customers can submit basic information to ask about bookings using the HTML
enquiry form.
Technological Challenges: The form's implementation and data capturing were simple, but
establishing a safe and effective system for data storage and retrieval for queries was an
important but doable issue.

Overall Evaluation:
The web design and development procedure comply with the specified requirements and
standards, mainly adhering to the design document.

Technical the majority of the difficulties were solvable and had little effect on the project's
development or result.

The photography gallery's scalability issue was effectively resolved, guaranteeing that the
website can handle upcoming additions without sacrificing functionality.

Akmal Faham COL 001509654

UNIT 10 WDD ASSIGNMENT 01 ESOFT Metro Campus

 4.1 Analyze the Quality Assurance (QA) process and review
how it was implemented during your design and
development stages.

QA process is expected to discover design issues and

development errors while testing a product’s user interface
(UI) and gauging the user experience (UX).

a. Analyze the Quality Assurance (QA) process and review how it was
implemented during the multipage website design and development
stages.

Quality Assurance (QA)

Within the software development lifecycle, quality assurance (QA) is a crucial process whose
main goal is to confirm that the final product meets quality standards and performs as
intended. This involves carrying out testing, validation, and assessment processes throughout
the design and development stages in a methodical manner. Finding and fixing any defects or
issues that may come up during the project is the goal.

Delivering high-quality goods or services that live up to client expectations depends heavily
on quality assurance (QA).

Early detection and mitigation of faults, defects, and difficulties during the development
process helps to minimize costly rework.

QA helps users and consumers trust it by producing consistent and dependable results. It
encourages adherence to legal obligations, industry standards, and optimal methods.

Akmal Faham COL 001509654

UNIT 10 WDD ASSIGNMENT 01 ESOFT Metro Campus

4.2 Evaluate the results of your Test Plan and include a review of
the overall success of your multipage website; use this
evaluation to explain any areas of success and provide
justified recommendations for areas that require
improvement. Prepare a user documentation to properly
guide the users of the implemented system.

a. Create a suitable Test Plan identifying key performance area and use it to
review the functionality and performance of your website.

Test Case.

Test Test Case Data Expected Outcome Actual

Case ID (Input) Output
1 Insert client inquiry to Your request has been sent, successfully – if Entered
the database the data entered Successfully.

The website provides a high-quality user experience and satisfies the specified objectives
and expectations, according to the testing findings. The favorable comments left by visitors
suggest that Malcolm's photography business is well-represented on the website, which also
highlights his skills. It is advised that ongoing updates and maintenance be performed to
address future needs and issues in order to maintain this level.

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

1. Summary of the key findings.

Usability and User Experience.

I. The website is user-friendly, with clear content display and straightforward

navigation, according to usability tests.

Akmal Faham COL 001509654

UNIT 10 WDD ASSIGNMENT 01 ESOFT Metro Campus

 II. The gallery and price pages, among other areas of the website, were simple for
users to navigate.

III. Malcolm's photographic skills are presented in an immersive experience that the
website skillfully engages users with.

Content and Information.

I. Important details about the experiences and enthusiasm of the photographer are
provided on the "About Malcolm" page.

II. Potential clients can better grasp the cost structure thanks to the clear and well-
organized presentation of pricing information.

III. The photography gallery enhances the overall quality of the website by successfully
showcasing Malcolm's work in an aesthetically pleasing manner.

Calability and Performance.

I. The website is scalable, able to hold a first batch of photos while being ready for
more in the future.

II. According to performance tests, even with substantial image collections, the website
maintains responsive load times, guaranteeing a flawless user experience.

Inquiry Management.

I. The HTML form for customer inquiries efficiently records their information,
including dates, times, and contact information.

II. Malcolm can communicate with potential clients more effectively because inquiries
are gathered and kept securely.

Akmal Faham COL 001509654

UNIT 10 WDD ASSIGNMENT 01 ESOFT Metro Campus

 Technical Stability.

I. Technical stability is demonstrated by the website, with no serious mistakes or

broken links found throughout testing.

II. All of the functional components, such as picture galleries, contact forms, and
navigation menus, work well.

Areas requiring improvement.

Gallery user experience.

Needed.
By adding tools like image captions, filters, and a search option, you can improve the user
experience in the gallery and make it easier for visitors to browse the photography collection.

Quick responsiveness.

Needed.
Make sure the website is completely responsive across a range of mobile devices, with the
layout and content presentation optimized for screens that are smaller.

SEO and Online Visibility.

Needed.
Use search engine optimization (SEO) techniques to increase the website's exposure in search
engine results pages (SERPs) and draw in natural traffic.

Regular content updates.

Needed.
To keep visitors interested, maintain the website fresh by periodically adding new photos and
updating the material.

Akmal Faham COL 001509654

UNIT 10 WDD ASSIGNMENT 01 ESOFT Metro Campus

 Security Measures.

Needed.
To better safeguard user information and website assets, bolster security measures with the
use of HTTPS, frequent security audits, and data backup procedures.

Provide justified recommendations for areas that require improvement.

Akmal Faham COL 001509654

UNIT 10 WDD ASSIGNMENT 01 ESOFT Metro Campus

 Akmal Faham COL 001509654

UNIT 10 WDD ASSIGNMENT 01 ESOFT Metro Campus

 Overall Evaluation.

Malcolm Lismore's multipage website has been successful in a number of areas, chiefly
usability, content display, scalability, and technological reliability. Notwithstanding, there
exists a scope for augmenting the user experience within the gallery, refining mobile
responsiveness, augmenting online visibility via search engine optimization, and executing
resilient security protocols. The website can maintain its good user experience and effectively
market Malcolm's photography company by taking care of these issues. Updating and
maintaining the website on a regular basis is crucial to its overall performance.

Success story of the system development.

I learned a lot about web design and development while working on Malcolm Lismore's
photography website. The project showed as well the value of flexibility and ongoing
education in the rapidly changing web development industry. Delivering a high-quality
solution required staying current with security protocols, responsiveness for mobile best
practices, and design trends. It highlighted how crucial it is to continue optimizing and
improving the website in order to keep it current and competitive.

So, finally the Project to develop Malcolm Lismore photography website was more valuable
for learning about the web development.

Akmal Faham COL 001509654

UNIT 10 WDD ASSIGNMENT 01 ESOFT Metro Campus

 USER MANUAL
(MALCOLM LISMORE PHOTOGRAPHY)

Akmal Faham COL 001509654

UNIT 10 WDD ASSIGNMENT 01 ESOFT Metro Campus

Step 01:

Open the Website “MALCOLM LISMORE PHOTOGRAPHY”.

Figure 66 Home Page

Akmal Faham COL 001509654

UNIT 10 WDD ASSIGNMENT 01 ESOFT Metro Campus

Step 02:

Then, click the “Registration Page” on the navigation bar. Then fill the blanks with the
relevant details in the Registration Form.

Figure 67 Registration Page

Figure 68 Gallery

Akmal Faham COL 001509654

UNIT 10 WDD ASSIGNMENT 01 ESOFT Metro Campus

Step 03:

Then, click “Gallery” to view our all photographs of different purposes.

Figure 69 Gallery

Akmal Faham COL 001509654

UNIT 10 WDD ASSIGNMENT 01 ESOFT Metro Campus

Step 04:

Then, click “Photograph Prices” to view our costs related to

Figure 70 Photograph Pricing

Akmal Faham COL 001509654

UNIT 10 WDD ASSIGNMENT 01 ESOFT Metro Campus

Step 05:

Then, click “About us Page” to get to know about Photography Studio and Photograph.

Figure 71 About Us Page

Akmal Faham COL 001509654

UNIT 10 WDD ASSIGNMENT 01 ESOFT Metro Campus

Step 06:

Then, click “More Booking and More Details” to book,

• What is the purpose of booking.
• How many hours do you need our booking.
• From when to when you need our booking.

And if you want any booking or further information below there we have mentioned our
contact details.

Figure 72 More Bookings and Details

Akmal Faham COL 001509654

UNIT 10 WDD ASSIGNMENT 01 ESOFT Metro Campus

References
1. MITCHELL CORY, KHARTIT KHADIJA, SCHMITT KIRSTEN ROHRS . (2023, July 31). What
Is File Transfer Protocol (FTP) and What Is It Used for? Retrieved from
investopedia.com:
Available at: https://www.investopedia.com

2. Skopec Christine, Paruch Zach . (2024, Jan 22). What Is HTTPS & How Does It Work?
[Explained]. Retrieved from www.semrush.com:
Available at: https://www.semrush.com/blog/what-is-https/

3. Connolly, Daniel, Mc Queen Sperberg, Michael C. (2009, 05 21). Web addresses in

HTML 5. Retrieved from Wikipedia:
Available at: https://en.wikipedia.org/wiki/URL#CITEREFW3C2009

4. Forward and Backslashes in URLs. (2017, Sep 19). Retrieved from

Available at: https://en.wikipedia.org/wiki/URL#Citations

5. geeksforgeeks. (2024, Feb 26).

6. Retrieved from
Available at: https://www.geeksforgeeks.org:
Available at: https://www.geeksforgeeks.org/user-datagram-protocol-udp/

7. GENUINE MODULES. (n.d.). What is server hardware.

8. Hilpisch, Duchscher E Robert, Rob & Seel, mark et al. (2009). Communication
protocol. WIKIPEDIA.

9. Javatpoint. (n.d.). Retrieved from javatpoint.com:

Available at: https://www.javatpoint.com/web-servers

10. PROTOCOL SUPPORT LIBRARY. (n.d.). Retrieved from EXTRAHOP:

Available at:
https://hop.extrahop.com/resources/protocols/http/#:~:text=The%20Hypertext%20
Transfer%20Protocol%20is,on%20the%20World%20Wide%20Web.

11. ScienceDirect. (2002). Hack Proofing Your Network (Second Edition).

12. Sometimes questions are more important than answers. (n.d.). Retrieved from
experienceux.co.uk:
Available at: https://www.experienceux.co.uk/faqs/what-is-wireframing/

Akmal Faham COL 001509654

UNIT 10 WDD ASSIGNMENT 01 ESOFT Metro Campus