Website Design and Development: A Comprehensive Guide to Creating a Multipage Website

This report delves into the intricate world of website design and development, providing a comprehensive guide to creating a multipage website. It explores server technologies, management services, front-end and back-end technologies, design principles, and testing methodologies. The report focuses on the development of a study portal for ICON College, showcasing the practical application of these concepts. Through detailed explanations, illustrative examples, and a comprehensive test plan, this report serves as a valuable resource for aspiring web developers and anyone seeking to understand the fundamental aspects of website creation.

Website Design and Development

Contents
Introduction:....................................................................................................................................4
LO1 Explain server technologies and management services associated with hosting and
managing websites...........................................................................................................................5
P1 Identify the purpose and types of DNS, including explanations on how domain names are
organized and managed...............................................................................................................5
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:.....................................................................................................................6
LO2 categories website technology, tools and software used to develop website:.........................8
P3 discuss the capabilities and relationships between front-end and back-end website
technologies and explain how these relate to presentation and application layers:.....................8
P4 discuss the difference between online website creation tools and custom built sites with
regards to design flexibility, performance functionality, and user interface and user
experience:.................................................................................................................................10
LO3 Utilize website technologies, tools and techniques with good design principles to create a
multipage website:.........................................................................................................................11
P5 Create a design document for a branded, multipage website supported with medium fidelity
wireframes and a full set of client and user requirement:..........................................................11
P6 use your design document with appropriate principles, standards and guidelines to produce
a branded, multipage website supported with realistic content.................................................15
LO4 Create and use a test plan to review the performance and design of a multipage website....19
P7 create a suitable test plan identify key performance areas and use it to review the
functionality and performance of website:................................................................................19
Conclusion:....................................................................................................................................27
References......................................................................................................................................28

Table of Figures:
Figure 1: About Us Page of ICON College...................................................................................11
Figure 2: Contact Page of ICON College......................................................................................12
Figure 3: Various colors & Images of the Website.......................................................................13
Figure 4: Grid Layout....................................................................................................................14
Figure 5: Mobile responsive..........................................................................................................14
Figure 6: Contact us page of ICON college...................................................................................15
Figure 7: Home page of the ICON website...................................................................................16
Figure 8: About us page of ICON website....................................................................................17
Figure 9: Courses page of the ICON college................................................................................18
Figure 10: Form Validation...........................................................................................................19
Figure 11: Email Validation..........................................................................................................20
Figure 12: Chrome Testing............................................................................................................21
Figure 13: Firefox Testing.............................................................................................................22
Figure 14: Mobile Testing.............................................................................................................23
Figure 15: Subscription Test..........................................................................................................24
Figure 16: Search Box Testing......................................................................................................24
Figure 17: Down to Top Navigation..............................................................................................25
Figure 18: Navigation Code Validation.........................................................................................25

Introduction:
Website design and development is the assignment to develop a website on the user requirement.
This development includes different front-end and back-end platforms with using the various
databases to perform the operations.
The current report is going to develop as ICON college study portal where the list of all courses
of computing department will be available for the students. I will create the website as a full-
stack web developer with front-end technologies like Html, CSS, javascript and bootstrap. The
website will be user-friendly and intuitive. The context part of the report will include the server
technology and management services. It is also categories the website technologies, tools and
software to develop the website in the report. The next part will include the design document and
the last one will contain the test plan with functionality and performance of the website.

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
A naming system which used the computers and services to connect them with a private network
or with the internet is called as Domain Name System. Domain names are alphabetic that
translate into IP address by the internet. The IP address is the unique logical address of system
for the network. The size of IP address is 32 bits and consists of two components, host
component and network components. The domain name architecture contains the domain names,
name, and space and name server. Here, the domain name is associated with the IP address and
the next one, domain namespace refers to the hierarchy of the naming structure. Here is the
different naming server as Root, primary and secondary.
 Rot server: it contains the complete tree of DNS not the information about the domains.
 Primary Server: it saves a file of its zone and performs operations on it like, create update
and maintain the zone.
 Secondary Server: These types of server used to transfer the information about the zone
from a server to another server. The server which the zone, does not has the service to
edit it (tutorialspoint, 2018).
The working of the domain name system is as follows:
 Type a website into the browser and ask local DNS for IP address.
 DNS not find the IP and transfer it to root DNS server and ask about IP
 Root server replies that, don’t know the IP of current website but know the IP of DNS
server
 Local DNS ask about the IP to the DNS server
 The com DNS reply to don’t know the IP of complete website but it knows the IP of the
site by removing www form it.
 The local DNS ask to the website for the IP and its reply with the IP address. Now local
DNS get the IP and send it to the system to get the server IP address.
Communication protocol: a protocol which used to transfer the information between two entities
using the different varieties. It covers signalling, authentication, correction and error detection. It
also defines the synchronizations, syntax and semantics of digital and analogue
communication.in the current system, communication is an important part of the staff of the
college. OSI and TCP/IP model are the types of communication. Some roles of communication
protocol are data routing, data sequencing, flow control, data formatting, error control and data
security (Kamil, 2012). \

Indexing and Ranking:
A step to add the information to a web page to search the index of the engine is known as
indexing of data. Here the term, the index is of the data is the collection of the web pages which
include the information of web page.
The ranking is the step to find the result of the user of the search engine. Here is some step of the
ranking are:
 Intent the user query with interpreting
 Identify the web page of index related to query (ENGE, 2016)
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:
To manage a website, there are different steps to manage a website by using some furcation like,
Take a regular backup of the data and notify the system before downloading anything from the
internet. Check the resources regularly and general content of the website. Need to clean the
database from the virus from the system.
A database is required to store the database of the users and visitors of the website. The
advantages of the database system are as follows.
 Improve the security of the data
 Effective data integration
 Increase the productivity of the user
 Store the data in a centralized format
 Focus on easy analysis and release the ability (RingLead, 2012)
Web server Software:
Web server supports only static files like HTML but in the current technology, it is possible with
a server-side application. This type of model is known as a client-server model which use various
servers. Here is some web server software which uses for a web application.
 Apache HTTP server: apache server is used to run on Linux operating system but
sometimes also on Windows and OS. It has its own architecture and user can add extra
modules in this architecture. It is an open source server which can support a big
organization to secure its data.
 NGINX: it depends on an asynchronous architecture which is event-driven and helps to
achieve the goals of the sessions. It has the ability to scale easily and light utilization of
the resource. It is not a complete web server but also load-balancer and proxy server.
 Node.js: a server-side javascript which uses as a web server in a network application.
Basically, it is the server of Linux foundation. It is a cross-platform runtime environment
which is better for network application (Muilwijk, 2016).
Web server Hardware:

Hardware requirement for a web server includes the processor, ram, hard disk, virtual machine
and some others. These all hardware has a different configuration of user requirement. The
website requires the web host to maintain the data flow and monitor the workflow for the
website. The other types of hardware include the different server like a print server, network
server and database server. Memory hardware required for the server as the hard disk according
to IP address and memory uses (Servaris, 2018).
Web Server Operating system:
An operating system is required to operating a network software or hardware. It’s platform to
install and run a network and server. Different operating systems have different configuration
and characteristics. The types of operating system are Microsoft Windows, Linux, MAC OS. The
operating systems are also helpful in web hosting because it is connected to the IP address. The
web server operating system has two types, first one is window based operating system and
another type is UNIX based web server system (Whoishostingthis, 2018).
M1 & M2: Successfully evaluate the web development technologies with their framework in
above section and also discuss the design and functionality of the management. in the next
discussion, complete the search engines with the explanation of site indexing and ranking
through search engine optimization.

LO2 categories website technology, tools and software used to develop a
website:
P3 discuss the capabilities and relationships between front-end and back-end
website technologies and explain how these relate to presentation and application
layers:
The web application or website created on the programming software and technologies which
has two types of it, front-end technology and back-end technology. Here we discuss both
technologies differently
Front-end technology:
Html, CSS, javascript is the main part of the front-end technology and these are the base of any
programming language.
 Html/CSS: HTML is known as hypertext markup language which used to create web
pages. It is a type of digital documentation where a person can make notes or any written
document with the use of HTML. CSS (cascading style sheet) is used to represent the
design of HTML. It used to create and change the design, layout, colour, text and
complete style of the page. These both are the basic part of any programming language.
 JavaScript/Jquery: Javascript is used to determine the function of the pages which
created the HTML and CSS. Some interactive features can add in the web page like
games, audio and video and page animation. There are various plugins and extensions in
this technology which makes faster and easier for the website.
 Responsive design: the pages adjust themselves in any browser of any device without
any error. This happens due to a feature of the responsive design. Bootstrap is major
things for the responsive design. It used with the HTML and CSS.
 Testing/Debugging: there are various testing available for a website or application like
functional testing, database testing, navigation testing, browser testing and many more.
Unit testing is the method to check the codes of the programming which are responsible
for any error (Morris, 2017).
Back-end technology:
The back-end technology is the Node.js, python, ruby, Php. it has the facility of scalability and
database administration. In other features of the back-end, techniques are data transformation,
backup methods and software.
 Language and frameworks: different frameworks and technologies used in back-end
technology like PHP, Python, Ruby on Rails, Laravel and others popular languages.
These languages are communicated with the database to execute the results for the users.
 DBMS: database management system is required for each website or application to store
the data. MySQL is most required database technology for every platform. It improves

the speed and features of a programming language. Another database technologies are
DB2, SQL server, Oracle is not as popular as MySQL. PostgreSQL is the database
technique of Ruby on rails platform which is open-source and has more fracture like,
messaging system and searching for full text. It also has its own data type which
integrated with ruby on rails.
 Caching and Key-value store: avoid optimization for complete an application as soon as
possible. But in case of more users, need to optimize the code. Caching is used in that
when we can’t use more optimization. It used to save the piece of the application that can
use after to process it with fast speed.
 Queue Systems: queue system is used to avoid the wait of the user for sing up
confirmation or other things. To improve the usability in this case, the website needs to
send a confirmation or feedback message to the user about to send the message of signup.
It can take few minutes to arrive. This process is known as an asynchronous task. Ruby
on rails face various queue which is called delayed job and it needs the database to
complete it (Morales, 2015).
Layers of the web design:
 Structure or content layer: it builds with the structure of Html code which creates a base
for the programming module. It includes the text and images with a hyperlink to navigate
the website.
 Style or presentation layer: it defines the structure of Html with the help of CSS
(cascading state sheet). CSS used to design the structure of the web page that how it
displays.
 Behaviour layer: it used with the help of JavaScript of a web page, which define the
behaviour of as the web page responds on user actions and user make changes in the
conditions of the web page (Kyrnin, 2017).

P4 discuss the difference between online website creation tools and custom built sites
with regards to design flexibility, performance functionality, and user interface and
user experience:
A web application which design to deliver the functions of features to the desktop application as
normally associated is known as rich internet application. It used to divide the process with the
internet and locate the user interface and its activity on the client side and data operation and
manipulation on the server of application side. RIA runs in the web browser and does not need
software to install (Rouse, 2007).
A website can be created by coding or manually by the online template and tools. The criteria of
design a website are, design flexibility, user interface, user experience and perforate with
functionality. Here is the difference between custom build sites and online website creation tools.
Advantages Disadvantages
Custom build sites  Flexible and can improve the
functionality
 No limitation of graphics and
easy to update the word
press.
 Better search engine
optimization and these sites
are necessary for e-
commerce.
 The higher cost of design
and maintenance
 Take a long time to
design and layout with
review and approval.
Online website
creation tools or
Template
 Less expensive and more
affordable
 Fast to implement a clear
schedule and less complexity
 More sophisticated with
robust and well designed
 Common design
 Limited accessibility of
graphic design and
navigation
 Limited functionality and
issue of security
(Johansson, 2014)
M3: Achieve the points of the custom built website in above section with the comparison of
manually created websites.

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 requirement:
To create a design document for a website or application, it is necessary to know about user and
technical requirement. These requirements help to understand the design principle before
creating the design:
User requirement: in the current scenario of website design, the user needs a website with
various features and availability of more flexibility. The website is full of attractive content,
pictures, designs and other features and the available services have online payment mode.
Client requirement: client of ICON College requires a secure website for the students of the
college with a secure database of college staff. The website should have a user-friendly graphical
user interface and administrator have all the authorities to allow the user to access the password.
The client also requires the SEO ranking and optimization to search the website on the browser.
Website Design Principle
A website creates different principles which are set on the user requirements; here are some
principles on which the Website of ICON College created.
Purpose: a website has always a purpose to create. The ICON college website is created for the
students and visitors of the college that they can see the course detail of the college and put any
query online.
Figure 1: About Us Page of ICON College

Communication: people need any information in their hand or in their access area. it’s required
to provide the communion facility on the online platform for the users of the website. In the
design of ICON college, the contact us page has the facility for contact to the college.
Figure 2: Contact Page of ICON College
Colours & Images: make an attractive website with using different images with proper colour
balance and interface design. Use contrast colour in background and text which make the content
easy to read. Give a modern look to the website with the colours. Select the right image for the
right content of the website so that it makes easy for the user to recognize a web page with its
picture without reading the complete content. Develop can use graphics and videos for the
website.

Figure 3: Various colours & Images of the Website

Grid Base Layouts: it is used by the framework to create a responsive website. In the design of
ICON college architecture, use the Bootstrap latest version 4.0 with the column number 12.
Figure 4: Grid Layout
Load time: no one has time to visit a slow website. People want everything in just one click on
the button. To reduce the load time of the page, optimize the image scale and size and use CSS
and JavaScript to modifying the web design.
Mobile Friendly: a website should be responsive on every device and screen to make a website
mobile friendly. For making a responsive website, just adjust the screen width according to the
size of the device.

Figure 5: Mobile responsive
(Woods, 2014)
P6 use your design document with appropriate principles, standards and guidelines
to produce a branded, multipage website supported with realistic content.
Design standard for the website:
Follow the standards and principles during develop a website. These guidelines create the
common client requirements. Here are some website standards as follows:
 A website should be mobile responsive which can use in different devices like, laptop,
MacBook, mobile and others.
 Take less time to load the website on all devices even with slow internet connection
speed.
 Enable the tracking of conversion and goals. The important page needs to complete with
SEO tags, elements including XML sitemaps.
 Require optimizing the conversion with the client about each page of the website.
 Include the back-end content management that enables editing content and publishing.
 Integration with a social media platform and take client email for marketing system
 Integrated the website with complete security (Pinsky, 2016 )
Website Design:

Contact Us Page:
Figure 6: Contact us page of ICON college
Home Page: home page has details about the about us page which design by the framework of
bootstrap.

Figure 7: Homepage of the ICON website

About Us: About page contains the information about the ICON college contains the procedure.
Figure 8: About us page of ICON website

Courses: this page includes the courses details of the ICON college.
Figure 9: Courses page of the ICON college
M4: successfully achieved the website design principles and design standards, which use for
comparing different websites.

LO4 Create and use a test plan to review the performance and design of a
multipage website
P7 create a suitable test plan identify key performance areas and use it to review the
functionality and performance of website:
After creating a website successfully, it requires testing it on different stages of browser testing,
navigation testing, validation testing. Here I test the website with the expected result and actual
results.
Test Case 1:
Test case Action Expect Result Actual Result Remark
Form Validation Submit blank
form
Show error to fill
name
Show error Success
Figure 10: Form Validation
Test Case 2:
Test case Action Expect Result Actual Result Remark
Email Validation Submit without
email
Show error to fill
email
Show error Success

Figure 11: Email Validation
Test Case 3:
Chrome Browser Testing:
Test case Action Expect Result Actual Result Remark
Browser Comp
ability
Open website in
a different
browser
Successfully
open in Chrome
Open
successfully
Success
Browser Comp
ability
Open website in
a different
browser
Successfully
open in Firefox
Open
successfully
Success
Browser Comp
ability
Open website in
the Mobile
browser
Successfully
open on mobile
Open
successfully
Success

Figure 12: Chrome Testing

Firefox Browser Testing:
Figure 13: Firefox Testing

Mobile Responsive Testing:
Figure 14: Mobile Testing

Test Case 4:
Test case Action Expect Result Actual Result Remark
Subscription Test Subscribe
without entering
the email
Show error to fill
email
Show error Success
Figure 15: Subscription Test
Test Case 5:
Test case Action Expect Result Actual Result Remark
Search box Search
something in the
box
It will search
successfully
Search
successfully
Success

Figure 16: Search Box Testing
Test case 6:
Test case Action Expect Result Actual Result Remark
Down to top
navigation
Click on arrow Screen move to
the top
Screen move Success
Figure 17: Down to Top Navigation

Figure 18: Navigation Code Validation
W3C Validation:
W3C refers to World Wide Web Consortium. It used the internet to check the XHTML and
HTML documents for markup of well-format. It used to ensure the technical quality of a website.
It helps to improve the website ranking in search engines. The Website of ICON College has
completed its validation.it also used to improve the user experience of the website and make
friendly the website browser. It provides the accessibility from multiple devices (Vijay, 2018).
M5: review the test cases of the website with using different testing like browser, navigation and
many more. As well as discuss the World Wide Web Consortium (W3C) validation.

Conclusion:
Successfully develop a website for ICON College on back-end technology with using the Html,
CSS, Javascript and Bootstrap framework. The first part includes the different servers and
indexing and ranking of a website, which are important for a website for future growth. The next
part has the web server hardware, software and operating system. The front-end technology
discussed in second part of the report which is using in the creation of the website. The
difference between template and manually created website explain in this part. The various
design principle of the website with design standards explains in next section with using the
image of the website. The last part of the report has the test cases of the website with W3C
validation.

References
 Enge, E. (2016). How does Google create search results? Learn here!. [online] Stone
Temple. Available at: https://www.stonetemple.com/how-googles-search-results-work-
crawling-indexing-and-ranking/ [Accessed 24 Apr. 2018].
 Johansson, S. (2014). The difference between template and custom-built websites.
[online] Prime Design Solutions. Available at:
https://www.primedesignsolutions.com/learning-center/difference-template-custom-built-
websites/ [Accessed 24 Apr. 2018].
 Kamil, A. (2012). communication-protocols. [online] Slideshare. Available at:
https://www.slideshare.net/Ali3041982/communicationprotocols [Accessed 24 Apr.
2018].
 Kyrnin, J. (2017). The 3 Layers That Make up Websites. [online] Lifewire. Available at:
https://www.lifewire.com/three-layers-of-web-design-3468761 [Accessed 24 Apr. 2018].
 Morales, D. (2015). Technologies used for backend development – David Morales.
[online] Davidmles. Available at: https://davidmles.com/backend-technologies/
[Accessed 24 Apr. 2018].
 Morris, S. (2017). 10 Skills You Need to Land Your First Front End Developer Job.
[online] Skillcrush. Available at: https://skillcrush.com/2017/03/20/front-end-developer-
skills/ [Accessed 24 Apr. 2018].
 Muilwijk, R. (2016). Top 5 open source web servers. [online] Opensource. Available at:
https://opensource.com/business/16/8/top-5-open-source-web-servers [Accessed 24 Apr.
2018].
 Pinsky, D. (2016). Forbes Welcome. [online] Forbes. Available at:
https://www.forbes.com/sites/denispinsky/2016/07/18/website-standards/#6a8c4d223641
[Accessed 24 Apr. 2018].
 RingLead. (2012). The Benefits Of Using Database Management Systems - RingLead.
[online] Available at: https://www.ringlead.com/blog/the-benefits-of-using-database-
management-systems/ [Accessed 24 Apr. 2018].
 Rouse, M. (2007). What is Rich Internet Application (RIA)? - Definition from
WhatIs.com. [online] SearchMicroservices. Available at:
https://searchmicroservices.techtarget.com/definition/Rich-Internet-Application-RIA
[Accessed 24 Apr. 2018].
 Servaris. (2018). Web Server Hardware. [online] Available at:
http://www.servaris.com/web-server-hardware.php [Accessed 24 Apr. 2018].
 tutorialspoint. (2018). Internet Domain Name System. [online] Available at:
https://www.tutorialspoint.com/internet_technologies/internet_domain_name_system.htm
[Accessed 24 Apr. 2018].
 Vijay (2018). Why do you need to validate your site on W3C? - Engineering Blog |
Engineering Blog. [online] Engineering Blog. Available at:
https://www.loginradius.com/engineering/need-validate-site-w3c/ [Accessed 24 Apr.
2018].
 Whoishostingthis. (2018). Operating Systems for Web Hosting: Our Expert Guide.
[online] Available at: https://www.whoishostingthis.com/compare/platforms/operating-
systems/ [Accessed 24 Apr. 2018].

 Woods, S. (2014). 10 Top Principles of Effective Web Design - Shortie Designs. [online]
Shortie Designs. Available at: https://shortiedesigns.com/2014/03/10-top-principles-
effective-web-design/ [Accessed 24 Apr. 2018].
Appendix: