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

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