INTERNATIONAL SCHOOL
OF MANAGEMENT AND
TECHNOLOGY
KATHMANDU, NEPAL
Unit Number & Title
Qualification
Student Name
R/615/1633 - Unit 10: Website Design &
Development
Assessor Name
Saugat Regmi
Bikul Raj Koirala
BTEC HND IN COMPUTING
Assignment Launch Date
Due Date
07 Jan 2022
06 March 2022
Session/Year
Assignment Title
01/2019
Completion Date
Assignment Number
Food Delivery System
1/1
Contents
Introduction to Web technology .................................................................................................................. 4
Introduction to Websites .............................................................................................................................. 4
Introduction to DNS ...................................................................................................................................... 5
Types of Domains .......................................................................................................................................... 6
Web Communication Protocol...................................................................................................................... 7
Some of the web communication protocols are explained below: .............................................................. 8
Web Server Hardware Tools for Website Design and Development.......................................................... 11
Operating Systems for Website Design and Development..................................................................... 13
Hardware Requirements for Website Design and Development ........................................................... 14
Relation between communication protocols, server components and website components: ............. 16
Web development technologies ............................................................................................................. 17
Types of Frameworks .............................................................................................................................. 26
Evaluation of Framework and Web Technology ................................................................................. 32
Content Management ......................................................................................................................... 35
Explain how Search Engine Works. ..................................................................................................... 35
What is the Aim of a Search Engine Algorithm? ................................................................................. 36
What happens when a search engine is performed? ......................................................................... 36
Why might a page not be indexed? .................................................................................................... 36
What is Search engine Crawling? ........................................................................................................ 37
How Does Web Crawling Work? ......................................................................................................... 37
How can Search engine Crawlers be Identified? ................................................................................ 37
What is Search Engine Optimization? ................................................................................................. 38
How does SEO work? .......................................................................................................................... 38
How website performance impacts conversion rates and SEO .......................................................... 39
What is a webpage’s conversion rate? ............................................................................................... 39
How does site speed affect conversion rates? ................................................................................... 40
Bibliography ................................................................................................................................................ 80
Part 1:
1. Prepare a report identifying purpose and types of DNS along with how domain names
are organized and managed. You should also explain the purpose and relationships
between communication protocols, server hardware, operating systems and web server
software with regards to web designing, publishing and accessing a website. Your report
should also contain the influence of search engines on website performance along with
website crawling, indexing and ranking and provide evidence-based support for
improving site’s index value and rank through search engine optimization.
2. Write an article evaluating the impact of common web development technologies and
frameworks with regards to website design, functionality and management. Also, explain
the capabilities and relationships between front-end and back-end website technologies
along with their relation to presentation and application layers. You should point out the
differences between online website creation and custom-built sites with regards to design
flexibility, performance, functionality, user experience (UX) and user interface (UI).
Evaluate a range of tools and techniques available to design and develop a custom-built
website along with justification to the tools and techniques chosen to realize a custombuilt website.
Introduction to Web technology
Web Technology refers to the various tools and techniques that are utilized in the process of communication
between different types of devices over the internet. A web browser is used to access web pages. Web
browsers can be defined as programs that display text, data, pictures, animation, and video on the Internet.
Hyperlinked resources on the World Wide Web can be accessed using software interfaces provided by Web
browsers. (none, Web Technology, 2021)
Introduction to Websites
“A website can be defined as a collection of related webpages that can be accessed by visiting a
homepage or using a browser such as Internet Explorer, Google Chrome, Opera, etc. For
example: The website address of Tutorialspoint is WWW.Tutorialspoint.com.”
Each website has its own URL which is Unique Global Address called domain name. a URL
comprises of-
1. The Protocol used to access the website, which in this case is http, meaning port 80. It
can also be https; port 443.
2. The subdomain which is default is www.
3. The domain name: domain names are normally chosen to have a meaning. Like in our
case “Tutorialspoint”, we can understand that this website offers tutorials.
4. The suffix name which can be .com, .info, .net, .biz, or country specific.
5. The directories or in simple words, a folder in the server that holds this website.
6. The webpage that we are looking at in our example, it is “about_careers.htm”.
(none, Website Development- Introduction, 2019)
(Figure from: tutorialspoint.com)
Introduction to DNS
DNS, or Domain Naming System, is a protocol that converts domain names into computer-readable IP
addresses. "It's a mechanism that lets you access to websites by matching human-readable domain names
(like wpbeginner.com) with the unique ID of the server where a website is kept." When a webpage is
recalled, DNS operates as a phonebook for the internet, storing server details with corresponding IP
addresses and sending the contents of the webpage. DNS synchronizes domain names with IP addresses,
allowing us to remember website names rather than the calling IP address that a computer uses to access
and retrieve website contents.
DNS resolution is the process of translating a hostname (for example,
www.example.com) into a computer-friendly IP address (such as 192.168.1.1). Each device on the
Internet is assigned an IP address, which is required to locate the proper Internet device, much like a
street address is required to locate a certain residence. When a user requests a webpage, a translation must
take place between the user's input (example.com) and the machine-friendly address required to locate the
example.com webpage. To comprehend the DNS resolution process, it's necessary to first learn about the
many hardware components that a DNS query must transit through. The DNS lookup takes place "behind
the scenes" in the web browser and requires no user intervention.
Types of Domains
Organizing and managing of domain names
DNS manages the distributed database system using a hierarchy. The DNS hierarchy, also referred to the
domain name space, is like eDirectory an inverted tree structure.
At the top of the structure the DNS tree has a single domain called root. A term or point (.) is
the root domain designation. The top levels of the DNS hierarchy are divided in segments below
the root domain.
The following list shows the hierarchy of the DNS domains:
Purpose of DNS
Internet resources such as computers, networks and services can be identified with the domains names
that are text-based, easier to memorize than the numerical addresses used in Internet Protocols. Domain
names are entire collection of such resources or individual instances can represent a domain name. The
main purpose of DNS is to convert the user readable hostname to computer understandable IP addresses
and vice versa. The DNS is like phonebook which call upon the relative IP linked to the hostname that
recalls the content of the website for the viewer. Furthermore, it is highly beneficial for the clients as the
users of the domain system will easily identify any kind of trusted servers.
Web Communication Protocol
Web Communication protocols are the technology used to pass data over the internet. For instance, a web
browser utilizes these protocols to obtain information from a web server, which is then reflected in the
form of images and text on the browser scree. The extent by which consumers can communicate with this
data relies on the protocol.
Some of the web communication protocols are explained below:
 Hypertext Transfer Protocol (HTTP)
The Hypertext Transfer Protocol (HTTP) is the most commonly used protocol for
internet communications. If we look right now in browser’s address field, we’ll probably
see Http:// at the front.
HTTP is a standard customer-service protocol. Users press a connection on their
internet browser (the customer), and the browser delivers an internet application to a web
server that maintains the site demanded by the customer. The server retrieves the site
material, such as text and pictures, which are displayed in the web browsers of clients.
HTTP is also an unsafe interaction protocol even though the information it sends back
and forth with a browser and a server is password protected and can be captured by thirdparty vendors.
 Telnet
Telnet has been one of the oldest communication protocols. A Telnet client, such as
HTTP, is being used to reach external servers. With the exception of HTTP, however,
which we only ask particular documents; Telnet is being used to simply sign on to the
web server and execute tasks as if we were standing in front of the server port. telnet is
now widely used as it is unsafe protocol which does not decrypt information sent by
distant PCs.
 File Transfer Protocol (FTP)
As the title suggests, the File Transfer Protocol (FTP) is predominantly used among
wireless PCs to transfer data such as documents, images, music, etc. Users need to sign
in to an FTP server either via a command-line interface or by one of the many FTP visual
client programs offered. Once registered in, users can browse via the file structure of the
webserver, moving, changing the name, deleting, and emulating files as if they were their
own computer.
 Hypertext Transfer Protocol Secure (HTTPS)
HTTPS is comparable to HTTP, however distinct in that it combines with a safety
protocol called SSL/ TLS that provide safe client-server communications over unsafe
networks such as the Online. We are most probable to see HTTPS protocols on ecommerce website asking for private economic data such as credit card numbers. We
understand that a website uses HTTPS protocols when we see “https://” the domain
name represented in the message body of our browser.
 IP Security (IPSec)
IP Security (IPSec) protocols encrypt information packets and bring them
between two PCs that share the very same cryptographic keys. In other words,
the IPSec protocol is like a corridor with no gates connecting two spaces. The
only location the information can go is between these two chambers. IPSec
protocols have been used in Digital Private Networks that enable a company’s
staff to connect to their company’s secure system via a government network
(e.g., from home or coffee shop).
 Post Office Protocol (POP)
The primary protocol for email transmission is the Post Office Protocol. POP
connects to a remote email server and downloads email messages to the recipient's
computer system through a supporting email software client that integrates POP. For
network connections, POP uses the TCP/IP protocol stack, and for end-to-end email
communication, it uses the Simple Mail Transfer Protocol (SMTP), with POP pulling
messages and SMTP pushing them to the server. POP 3 is the third version of Post
Office Protocol, which is widely utilized in most email client/server communication
architecture as of 2012.
 Simple Mail Transfer Protocol (SMTP)
Simple Mail Transfer Protocol (SMTP) is an acronym for Simple Mail Transfer
Protocol. Simple Mail Transfer Protocol (SMTP) is a set of communication protocols
that allows applications to send electronic mail over the internet. It's a program that
uses e-mail addresses to deliver messages to other computer users. It allows users on
the same or different computers to exchange mail, and it also supports: It can
transmit one or more recipients a single message. Text, voice, video, and graphics
can all be used to send messages. It can also send messages through networks that
aren't connected to the internet. SMTP is mostly used to establish communication
rules between servers. The servers have a mechanism for identifying themselves and
stating the type of communication they are attempting. They also have a system in
place to deal with problems like an inaccurate email address. If the recipient address
is incorrect, the receiving server will respond with an error message.
Web Server Hardware Tools for Website Design and
Development
A web server is a machine that houses web server software as well as the files that make up a website. It's
connected to the internet and may exchange physical data with other web-connected devices, as shown
below:
1. Computer
Most modern computers and devices meet the minimum criteria for creating a website. The size of the
storage space on the PC is the most important parameter to check, which should be greater than 2 GB, but
more is better. Even with heavy apps like website publishers or photo editors, the computer will run
quickly and smoothly as a result of this. The system should also be able to connect to a mouse and
keyboard.
2. Internet
Remarkable Speed internet may be required for the development of a website. This allows you to send the
website's contents to the internet server, which will host the website, update it, and monitor it live online
to make sure it's working properly.
3. External Hard Drive or DVDs for Backup
In my instance, there was a problem with the site crashing or files becoming corrupted, thus we need
constantly have a current replica of the website. We can store this data on an external hard drive or a set
of DVDs, depending on our needs. Although it is possible to collapse an external drive and lose storage,
DVDs are more inconvenient and can also scrape data. How much storage we should build depends on
how frequently we update the site, but it can be a reasonable amount of time once a month for a
frequently updated website.
4. Server
To ensure that everyone attempting to view your website is able to do so at all times, you'll need a
client computer to host it. Setting up a laptop to act as a remote server is a difficult operation, and
purchasing a service package from a domain registration company is considerably easier, more
efficient, and more cost-effective. They'll keep the server computer, and you'll be able to access it to
make changes to your page's data.
5. Mobile Devices
Many free website creation apps allow users to change, update, and run their page via a mobile device,
even if it isn't required. You should consider having an internet-enabled smartphone or computer if you
are regularly on the go and want to be able to make adjustments to your site from wherever you are.
6. Lenovo Ideapad 7 15-inch
My Lenovo laptop was purchased in 2020, and it is still in excellent condition. This laptop comes with 12
GB of RAM and a 512 GB SSD. For the past two years, this has been my primary machine. This is ideal
for travel and the occasional cup of coffee while doing household.
Operating Systems for Website Design and Development
The competing operating systems are: IOS, Linux and Windows.
The section below is listed alphabetically to avoid the appearance of favoritism.
Conflicting operating systems were: IOS, Linux and Windows. The parts here are sequential to prevent
the presence of favoritism.
1. Windows
According to RJ Systems, there are numerous advantages to using Windows as a developer. One
of these advantages is ease of use—everyone grew up with Windows, and the interfaces we used
back in the day are still usable now.
Windows appears to be doing everything it can to keep its developer base loyal. In Windows 10,
the Developer Mode allows programmers to test apps, change settings, and browse some
advanced options that aren't available to regular users. Windows Developer Mode is primarily an
OS extension or value-added function that provides a unique user experience component to
Windows for developers. Finally, a developer interface that makes sense from both a practical
and visual one. Developers are given a wide range of assistance, which is a significant positive
and one of the most commercialism factors that attracts developers to the Windows OS.
• The vast majority of products and services are tailored to this platform.
• Has a number of security issues.
• Possess Photoshop skills.
It Isn't POSIX-compliant.
• By default, it installs apps via a graphical user interface (slow).
• There are a few useful applications pre-installed. Unless we install the operating system, it
automatically installs a slew of bloatware.
• Upgrades major versions twice or three times every decade, more or less.
This platform is used by some servers.
2. IOS
According to Macworld, for the last fifteen years, the Apple OS has been designed on prime of UNIX,
which, per Jessica Su, a metal PHP Stanford student, was a big development for programmers. Why? As
a result of Su, “It enables you to run programs in virtually any language while not employing a
specialized IDE.” Most technical school corporations need their staff to figure on Unix-based systems;
therefore, operating with MacOS could increase the career prospects of developers. Software developer,
St. Christopher Miles, argues that programmers and coders love MacOS due to the build quality of Apple
machines. Per Macworld, an enormous and for macOS is its cross-platform compatibility. Running
MacOS on a windows laptop could be close to the impossibility for many, but Mac, you’ll simply install
windows or UNIX operating system. This suggests that “If you’ve got mackintosh, you’ll produce and
take a look at software package for Windows and UNIX operating system from within it.”






Almost everything has a high level of visual polish.
There are a lot of things that aren't free.
Have Photoshop skills.
Is POSIX compliant.
By default, it installs apps via a graphical user interface (moderate-fast).
There is a lot of essential software pre-installed, but there is also a lot of
bloatware.
 Major versions are upgraded every several years (easily installed).
 This platform is utilized by a small number of servers, but it is closely
related to the most widely used platform.
3. Linux
Because Linux is supported by the majority of internet servers throughout the world, it's very likely that
your "back end" can be made to work on Linux.
The "front end" code can be written on any platform – Linux runs both Firefox and Chrome –
except for testing, you'll need a Windows machine to run Internet Explorer/Edge and a raincoat to
run campaign – and a variety of humanoid and Apple cell phones if you have a separate "mobile"
version of your web content.
That isn't entirely true, as some people do host their servers on different platforms... So, if you
want to deploy to a Microsoft-based server, you'll have to create a Windows laptop.






The majority of things are readily available (plus free-for-developers).
Has a "sink or swim" adjustment period (not typical-user friendly).
There are a dozen photoshop alternatives, but none of them are photoshop.
Is POSIX, and by definition, prefers to install systems via CLI (rapidly).
A few helpful apps pre-installed with minimal clutter.
In general, important variations are updated every year or two years,
sometimes less (Easily installed).
 This platform is used by the majority of server
Hardware Requirements for Website Design and Development
 System Requirements
Windows Requirement
Mac Requirements
Linux Requirements
Operating System
Windows 8 or newer
Mac OS Sierra 10.12
or Higher.
64-bit
Ubuntu 14.04+,
Debian 8+,
OpenSUSE 13.3+, or
Fedora Linux 24+
Processor
Intel Pentium or higher
Memory
2 GB minimum, 4 GB recommended
Screen
Resolution
1280X1024 or larger
Application
window size
1024X680 or larger
Internet
Connection
Required
Intel
Intel Pentium 4 or higher
 Software Requirement
Operating System
Built-in Editor
Windows

Notepad
Mac OS

Text Edit
Linux




Vi (All Unix)
GEdit (Gnome)
Kate (KDE)
LeafPad (Xfce)
Third-Party Editor
 Notepad ++
 Visual Studio Code
 Web Storm
 Brackets
 Shift Edit
 Sublime Text
 Text Wrangler
 Visual Studio Code
 Brackets
 Shift Edit
 Sublime Text
 Emacs
 Vim
 Visual Studio Code
 Brackets
 ShiftEdit
 Sublime Text
Chrome OS

Shift Edit
 XAMPP Control Panel
XAMPP is a free and open-source cross-platform web server. Cross-Platform, Apache, My SQL, PHP,
and Perl is abbreviated as XAMPP. XAMPP is a popular cross-platform web server that allows
programmers to build and test applications locally. It was produced by Apache Friends, and its native
source code can be revised or modified by anyone. It comes with Maria DB, Apache HTTP server, and
PHP and Perl interpreters, among other things. Because of XAMPP's ease of use, a developer may
quickly and easily install a WAMP or LAMP stack on a computer, with the added bonus of being able to
load popular add-on software like Word Press and Joomla.
Relation between communication protocols, server components and
website components:
Communication protocols, which are essentially a formal description of digital messages, formats, and
even regulations whose main goal is to send messages in or between computer systems, are required for
the systematic and efficient operation of the internet. This serves as a network between the web server's
hardware and a workstation, or as server hardware that transports communications.
Meanwhile, communication protocols are critical in getting data from the server to the client. In order to
utilize the Internet, we need physical components such as server hardware that is actually hardware, or
even programs that operate on the hardware where we use the Internet, as all internet data is saved on
server hardware. A hardware package is required. Similarly, we need a system that is compiled by an
operating system, which is frequently a computer program or component of an app, in order to operate
computer hardware. Finally, we require a webserver, which is a software or hardware computer that
executes or operates several websites in order to facilitate connection between clients and a
communication protocol.
Figure: Relation between communication protocol, server components and website
components.
Web development technologies
The construction of this website used a variety of technologies and frameworks. For
customers and businesses, technology is a vital aspect of website creation. Web development
technologies and frameworks, such as web design, content development, and network
development, as well as tools that require software development, are simple to create. The
following are some of the most common web development technologies:
1. Notepad++:
Web design that handles bug fixes and patches in our project is quite popular in today's
Notepad++. They offer a variety of website design services, including PHP training,
issue detection, and a temporary project file preview. They do not, however, give
assistance in the website construction process in general.
Notepad ++ is a free and source code editor and Notepad replacement that supports
several languages. Running in the Microsoft Windows environment, its use is governed
by GNU General Public license.
Based on the powerful editing component Scintilla, Notepad++, is written in C++ and
uses pure Win32 API and STL which ensures a higher execution speed and smaller
program size. By optimizing as many routines as possible without losing user
friendliness, Notepad++ is trying to reduce the world carbon dioxide emissions. When
using less CPU power, the PC can throttle down and reduce power consumption,
resulting in a greener environment. (none, What is Notepad++?, 2020)
2. Sublime Text Editor
Sublime Text Editor is a sophisticated text editor which is widely used among
developers. It includes wide features such as Syntax Highlight, Auto Indentation, File
Type Recognition, Sidebar, Macros, Plug-in and packages that make it easy for working
with code base. (none, Sublime Text Editor, 2020)
3. HTML
HTML (Hyper Text Markup Language) is the most basic building block of the web. It
defines the meaning and structure of web content. Other technologies besides HTML are
generally used to describe a web page’s appearance/presentation (CSS) or
functionality/behavior (JavaScript).
“Hypertext” refers to links that connect web pages to one another, either within a single
website or between websites. Links are a fundamental aspect of the Web. By uploading
content to the internet and linking it to pages created by other people, you become an
active participant in the World Wide Web.
HTML uses “markup” to annotate text, images, and other content for display in a Web
browser. HTML markup includes special “elements” such as <head>, <title>, <body>,
<header>, <footer>, <img>, <ul>, <li> and many others.
An HTML element is set off from other text in a document by “tags”, which consist of
the element name surrounded by “<” and “>”. The name of an element inside a tag is
case insensitive. That is, it can be written in uppercase, lowercase, or a mixture. For
example, the <title> tag can be written as <Title>, <TITLE>, or in any other way. (none,
HTML, 2022)
4. CSS (Cascading Style Sheets)
Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation
of a document written in HTML or XML. CSS describes how element should be
rendered on screen, on paper, in speech, or on other media.
CSS is among the core languages of the open web and is standardized across Web
browsers according to W3C specifications. Previously, development of various parts of
CSS specification was done synchronously, which allowed versioning of the latest
recommendations. You might have heard about CSS1, CSS2.1, CSS3. However, CSS4
has never become an official version.
From CSS3, the scope of the specification increased significantly and the progress on
different CSS modules started to differ so much, that it became more effective to develop
and release recommendations separately per module. Instead of versioning the CSS
specification, W3C now periodically takes a snapshot of the latest stable state of the CSS
specification.
CSS (Cascading Style Sheets) is used to style and layout web pages- for example, to alter
the font, color, size and spacing of your content, split it into multiple columns, or add
animations and other decorative features. This module provides a gentle beginning to
your path towards CSS mastery with the basics of how it works, what the syntax looks
like, and how you can start using it to add styling to HTML (none, CSS: Cascading Style
Sheets, 2020)
CSS helps in controlling various within the website like font controlling, positioning,
styling, of the website. Due to this process and flexible way of making website designs
attractive this is also used.
5. PHP (Hypertext Preprocessor)
PHP began as a small open-source project that grew in popularity as more people realized how valuable it
was. In 1994, Rasmus Lerdorf released the initial version of PHP. "PHP: Hypertext Preprocessor" is a
recursive abbreviation for "PHP: Hypertext Preprocessor." PHP is an HTML-enabled server-side
programming language. It's used to manage dynamic content, databases, and session monitoring, as well
as to create full e-commerce websites. MYSQL, PostgreSQL, Oracle, Sybase, Informix, and Microsoft
SQL Server are just a few of the databases it supports. PHP runs quite quickly, especially when compiled
as an Apache module on the Unix side. Once started, the MYSQL server runs even the most sophisticated
queries with large result sets in record time. POP3, IMAP, and LDAP are just a few of the important
protocols that PHP supports. PHP4 included support for Java and distributed object architectures (COM
and CORBA), allowing for the first-time n-tier programming. PHP is forgiving: The PHP programming
language makes every effort to be as forgiving as possible. The syntax of PHP is similar to that of C.
(none, PHP, 2020)
6. JavaScript
JavaScript is a text-based programming language used both on the client-side and server-side that allows
you to make web pages interactive. Where HTML and CSS are languages that gives structure and style to
web pages, JavaScript gives web pages interactive elements that engage a user. Common examples of
JavaScript that you might use every day include the search box on Amazon, a news recap video
embedded on The New York Times, or refreshing your Twitter feed.
Incorporating JavaScript improves the user experience of the web page converting it from a static page
into an interactive one. To recap, JavaScript adds behavior to web pages. JavaScript is mainly used for
web-based applications and web browsers. But JavaScript is also used beyond the Web in software,
servers and embedded hardware controls. (none, What is JavaScript?, 2021)
7. jQuery
jQuery is a feature-rich, fast, compact, cross-platform JavaScript library. Its purpose is to make HTML
client-side scripting easier. With an easy-to-use API that works on a variety of browsers, it makes tasks
like HTML document navigation and manipulation, animation, event handling, and AJAX relatively
straightforward.
The primary goal of jQuery is to make it simple to use JavaScript on your website in order to make it
more interactive and appealing. It's also utilized to add animation.
8. ASP.NET
ASP.NET is a web development platform, which provides a programming model, a comprehensive
software infrastructure and various services required to build up robust web applications for PC, as well
as mobile devices.
ASP.NET works on top of the HTTP protocol, and uses the HTTP commands and policies to set a
browser-to-server bilateral communication and co-operation.
ASP.NET is a part of Microsoft .Net platform. ASP.NET applications are compiled codes, written using
the extensible and reusable components or objects present in .Net framework. These codes can use the
entire hierarchy of classes in .Net Framework.
The ASP.NET application codes can be written in any of the following languages:




C#
Visual Basic .Net
JavaScript
J#
ASP.Net is used to produce interactive, data driven web applications over the internet. It consists
of a large number of controls such as text boxes, buttons, and labels for assembling, configuring,
and manipulating code to create HTML pages.
9. Ruby
Ruby is an object-oriented programming language in its purest form. Small talk, Perl, and Python all have
aspects in common with Ruby. Scripting languages include Perl, Python, and small talk. Small talk is an
object-oriented language in the truest sense. Ruby, much like small chat, is an ideal object-oriented
programming language. It's a lot easier to use Ruby syntax than it is to use small talk syntax. Some of the
features of Ruby are:





2.1.
Ruby is an open-source and is freely available on the web, but it is subjected to a license.
Ruby can be used for developing Internet and Intranet applications.
Ruby can be installed in Windows or POSIX environments.
Ruby can easily be connected to DB2, MY SQL, oracle and Sybase.
Ruby has a rich set of built-in functions, which can be used directly into Ruby scripts.
Framework
A framework, or software framework, is a platform for developing software applications. It provides a
foundation on which software developers can build programs for a specific platform. For example, a
framework may include predefined classes and functions that can be used to process input, manage
hardware devices, and interact with system software. This streamlines the development process since
programmers don’t need to reinvent the wheel each time, they develop a new application. (none,
Framework, 2020)
Advantages of Framework
 Assists in the establishment of improved programming habits and the appropriate
application of design patterns.
 The use of code is more secure.
 It is possible to eliminate duplicating and superfluous code.
 Assists in the continuous development of code with fewer defects.
 It is now easy to work on advanced technology.
 One could either develop their own software framework or contribute to existing
open-source frameworks. As a result, the functionality is constantly improving.
 A number of code segments and features have already been built and tested. This
improves the dependability of applications.
 Testing and debugging the code is a lot easier now, and even non-owners of the
code can do so.
 The time it takes to design an application is greatly decreased.
Types of Frameworks
 Angular
Angular is an open-source, typescript-based JS framework that makes it simple to create web
applications. Angular combines declarative templates, dependency injection, end-to-end tooling, and
more to tackle application development difficulties.
Angular allows developers to create applications that run on the web, mobile devices, and desktop
computers.
The popular JavaScript framework is utilized in numerous Google internal tools as well as public-facing
applications and services like Good Cloud Platform and AdWords.
The following are some examples of popular websites built with Angular JS:
o
o
o
o
o
Netflix
Paypal
Upwork
Youtube
Django
Django is a Python-based web application framework that is free and open-source. Django is a web
development framework created by a team of experienced developers that allows developers to focus on
creating apps rather than reinventing the wheel.
Django is actively used in the creation of large organizations. The following are some examples
of prominent Django-based websites:
o
o
o
o
Disqus
Instagram
Mozilla
Pinterest
Pros of Angular JS
 Double-way information binding.
 DOM manipulatioin.
 Enhanced server efficiency.
 Quicker application prototyping.
 Responsive internet.
 Strongly verifiable products.
 MVVM design.
 Use of directives.
 Simple HTML fonts.
 Quick development.
Cons of Angular JS






Compulsory support for JavaScript.
Inexperience with MVC.
Scopes.
Other challenging characteristics.
Allowable time consumption.
Difficult learning.
 Laravel
Laravel is a PHP-based web application framework with a simple and expressive syntax. The opensource framework uses a strong and easy-to-understand model-view-controller design paradigm.
According to Google Trends, Laravel is the most powerful PHP framework, providing a standardized and
feature-rich platform for developing high-performance PHP web applications.
The following are some examples of popular Laravel-powered websites:
o
o
o
o
Alison.com
Barchart.com
Neighborhood lender
World Walking
Pros of Laravel





New
Quick app developing
Quick execution of the web app
Simple-to-use (easy-to-learn)
Specifications for contemporary internet apps (safety, etc).
Cons of Laravel
Zend and symphony are being tested and examined. Now and then, there may be glitches in Laravel, as
they are still being developed and legacy schemes shall not be transmitted to Laravel. Some companies
will remain with Zend or Symphony as they would make so much effort to produce it with Laravel.
Data Science Frameworks
 Apache Spark
Apache Spark is a large-scale data processing engine with no files. Using Apache Spark, you can quickly
create apps in Java, Scala, Python, R, and SQL.
Apache Spark is used by over 3000 companies, including industry leaders such as:
o
o
o
o
o
o
o
o
 PyTorch
Amazon
Cisco
Databricks
Hortonworks
Microsoft
Oracle
Verizon
Visa
PyTorch is an open-source machine learning framework that helps you go from idea to production faster.
PyTorch, which was created by Facebook's AI research lab, may be used with both Python and
C++. PyTorch is a programming language that is used for computer vision and natural language
processing (NLP). The following are some examples of popular websites built with PyTorch:
o
o
o
o
Comcast
Exelon
Trifo
Quadient
 TensorFlow
TensorFlow is an open-source machine learning framework that runs from start to finish (ML). It features
a robust ecosystem of tools, libraries, and community resources that allow researchers to dive into
machine learning and developers to swiftly build and deploy ML-powered apps.
Three typical applications for TensorFlow are:



Image recognition and processing using Convolutional Neural Networks (CNN).
Data analysis and basic behavioral predictions using large-scale linear models.
Models for human language-related traits based on sequence-to-sequence (Seq2Seq).
Evaluation of Framework and Web Technology
Architecture
The following features and attributes are shared by all three web application frameworks:




Streamline development by automating some parts;
Add structure to the code and make it more readable;
Reuse components to speed up the development process;
Support concurrent creation/update of content and development.
The model-view-controller (MVC) architecture is shared by all three frameworks. Despite the fact that
Django's design is called model-view-template (MVT), it is extremely similar to MVC. The data model,
user interface, and control logic of an application are split into three components in MVC. The model is in
charge of the application's data and business rules; the view is in charge of presenting data to the user via
an interface; and the controller is in charge of interpreting user inputs and communicating with the model
to make the necessary changes.
Evaluation method
Many variables should be considered when evaluating a web development framework. A web developer,
project manager, or entrepreneur may all have distinct points of view, and the specific requirements for
each project will differ. Furthermore, web development frameworks are influenced by a plethora of
continually changing aspects, such as social, perceptual, and contextual influences, which do not cleanly
fit into a technical assessment. These social variables are just as significant as technical factors, especially
in open-source development, where "developer buy-in" and community support are critical. As a result,
evaluating each framework objectively is difficult.
Traditional measures such as benchmark performance and programming language technical
excellence, among others, are being ignored since variations in these dimensions are becoming
increasingly trivial and less significant for web development. Furthermore, typical criteria-based
evaluation metrics are already accessible. A blog was created for each framework to elicit the most
helpful set of evaluation metrics. As a result, blogging became a de-facto reference task. Authentication,
content management, publication, and maintenance are all included in the most basic elements of
practically any web site. The blog prototypes helped provide hands-on experience with the
designer/programmer separation that resulted.
Consider:
1. The application cannot be broken by the designers. Because they never touch the application code, you
don't have to worry about a designer error bringing your app to a standstill.
2. Designers have complete control over the material and may do whatever they want with it without
having to contact the programmer.
3. Programmers aren't fiddling with the design and front-end code of an application. In other words, you
won't have to clean up after your coder, who doesn't seem to realize that the <b> and <i> tag are obsolete.
4. Programmers can make changes to the application code without altering the appearance.
Django's template language is also not limited to HTML, allowing you to build files in CSS,
JavaScript, XML, and other forms. If more complex functionality is necessary (for example, printing data
in a 5-column table), the function is written in a view and pulled by a template. As a result, the Django
template language remains simple and straightforward.
Evaluation
1. User interface development
Support for designing user interfaces is the emphasis of this metric. The default templates and
support for JavaScript libraries were evaluated for each framework. Templates are an essential
aspect of the MVC framework's structure; they determine the user interface of any new
application created using the framework by default. JavaScript is a programming language that
allows end-user interactivity and is used in millions of websites and server applications.
Usability of Templates (views)
The corresponding frameworks can isolate content from presentation using templates (in Django) or
views (in Rails and Cake PHP). Each framework relies on this paradigm and implementation of the MVC
architecture. Individual page templates define the precise content of a specific page, whilst templates
define the overall layout of the pages. The way the frameworks embed dynamic content is the main
distinction between them.
Cake and Rails Because PHP views utilize Ruby code snippets, they may have some complicated
functionality. Django, on the other hand, uses a template language that can be understood by web
designers who are familiar with HTML but not with programming. This could be useful in projects where
graphic and web designers collaborate with programmers on the site's development.
Django's method thus has additional advantages for large projects, as designers can quickly learn the
language and work on layout without the assistance of programmers.
Maintainability
This metric focuses on the framework's help for sustaining a site. It determines how successfully changes
can be monitored and restored in a multi-developer system, as well as if new development, upgrades, or
installations cause problems for old pages. Websites are apps that are always changing. Whether it's a
blog or a company's website, material must be updated on a regular basis. For example, Google site
ratings are based on how frequently a site is updated. As a result, in today's environment, consumers
expect to be able to edit information and make changes to a website using a user-friendly interface.
Content Management
The site administrative interface is provided by all three frameworks and is used to conduct CRUD
(Create, Retrieve, Update, and Delete) activities on data. Ruby on rails and CakePHP provide only the
most basic capabilities, with scaffolding that can be customized further by a developer. Django generates
administration pages automatically, which can save time while designing an application. To get a wellfunctioning back-end, a developer only needs to add a few lines of code. A developer in Django gives
attributes and parameters to Django model classes and fields. The created pages have a variety of editing,
creation, retrieval, update, and deletion options.
In the model, there are CRUD items. Additionally, records can be searched, filtered, and saved. The
history page, which lists any modifications made to an object via the Django admin, together with the
timestamp and username of the person who made the changes, is an option. In a world where goods must
be released quickly, this implies that once the administration panel is up and running, a user can begin
adding material via the back-end, while the developer continues to work on the views.
Automatically created admin pages are convenient and time-saving, however they only handle basic
relationships. Developers can override the default administrative panel and construct a custom one for
advanced features. As a result, this functionality is better suited to smaller projects and webpages rather
than massive online apps.
2.2.
Search Engine
A search engine is a piece of software that may be used to search a database of information based on a
user's query. The engine returns a list of results that best fit the user's search criteria. On the Internet
nowadays, there are a plethora of search engines, each with its unique set of capabilities and features.
Archie was the first search engine ever invented, and it was used to search for FTP files. Veronica was the
first text-based search engine. Google is currently the most popular and well-known search engine. AOL,
Ask.com, Baidu, Bing, DuckDuckGo, and Yahoo are some of the other popular search engines.
How to access a website search engine?
“The search engine for a website is at the top or side of each page on a well-designed website. For
example, on Computer Hope, our search is at the top and bottom of every page. Using a website search
engine shows you results only from that website and not the entire Internet. Also, some companies may
have additional features to make using their search easier. In our case, we use custom technology called
Hopebot that helps direct visitors using our search.” (none, search engine, 2021)
Explain how Search Engine Works.
Using their own web crawlers, search engines crawl hundreds of billions of pages. Search engine bots or
spiders are frequent names for these web crawlers. A search engine navigates the internet by downloading
web pages and following links on those sites to find new pages that have been added.
The Search Engine Index
Webpages discovered by the search engine are added to an index, which is a data structure.
The index includes all the discovered URLs along with a number of relevant key signals about the
contents of each URL such as:
 The keywords discovered within the page’s content – what topics does the page cover?
 The type of content that is being crawled (using microdata called Schema) – what is included on
the page?
 The freshness of the page – how recently was it updated?
 The previous user engagement of the page and/or domain- how do people interact with the page?
What is the Aim of a Search Engine Algorithm?
The goal of the search engine algorithm is to give a relevant set of high-quality search results that will
rapidly answer the user's query.
The user then chooses an option from the list of search results, and this action, together with following
activity, contributes into future learnings that may affect future search engine rankings.
What happens when a search engine is performed?
When a user types a search query into a search engine, all of the pages in the index that are judged
relevant are identified, and an algorithm is used to rank the relevant pages hierarchically into a set of
results.
For each search engine, the method utilized to prioritize the most relevant results is different. For
example, a page that ranks highly in Google for a search query may not score highly in Bing for the same
query. In addition to the search query, a search-engines use other relevant data to return results, including:




Location- Some search queries are location-dependent e.g., ‘cafes near me’ or ‘movie times.
Language detected- Search engines will return results in the language of the user, if it can be
detected.
Previous search history- Search engines will return different results for a query dependent on
what user has previously searched for.
Device- A different set of results may be returned based on the device from which the query was
made.
Why might a page not be indexed?
There are a number of circumstances where a URL will not be indexed by a search engine. This may be
due to:


Robots.txt file exclusions- A file which tells search engines what they shouldn’t visit on your
site.
Directives on the webpage telling search engines not to index that page (no index tag) or to
index another similar page (canonical tag).


Search engine algorithm judging the page to be low quality, have thin content or contain
duplicate content.
The URL returning an error page (e.g., a 404 Not Found HTTP response code).
What is Search engine Crawling?
Crawling is the process by which search engine web crawlers (bots or spiders) visit, download, and
extract links from a website in order to find other pages.
Pages crawled by the search engine are crawled on a regular basis to see if the page's content has changed
from the previous time it was crawled. When a search engine finds changes to a page after crawling it, it
updates its index to reflect these changes.
How Does Web Crawling Work?
To find and access web pages, search engines utilize their own web crawlers.
All commercial search engine crawlers start by downloading a website's robots.txt file, which sets rules
for which pages search engines should and should not crawl. The sitemaps.txt file, which provides lists of
URLs that the site wishes a search engine crawler to crawl, may also be included in the robots.txt file.
To determine how often a page should be re-crawled and how many pages on a site should be indexed,
search engine crawlers utilize a number of algorithms and criteria. A page that updates regularly, for
example, may be crawled more frequently than one that is infrequently updated.
How can Search engine Crawlers be Identified?
The search engine bots crawling a website can be identified from the user agent string that they pass to
the web server when requesting web pages.
Here are few examples of user agent strings used by search engines:

Googlebot User Agent
Mozilla/5.0 (compatible; Googlebot/2.1; +https://www.google.com/bot.html)

Bingbot User Agent
Mozilla/5.0 (compatible; bingbot/2.0; +https://www.bing.com/bingbot.html)

Baidu User Agent
Mozilla/5.0 (compatible; Baiduspider/2.0; +https://www.baidu.com/search/spider.html)

Yandex User Agent
Mozilla/5.0 (compatible; YandexBot/3.0; +https://Yandex.com/bots)
Anyone can use the same user agent as those used by search engines. However, the IP address
that made the request can also be used to confirm that it came from the search engine – a process
called reverse DNS lookup.
Sitemaps
Crawling sitemaps is another approach for search engines to find new pages.
A sitemap is a list of URLs that a website might construct to provide search engines with a list of
pages to crawl. These can aid search engines in finding content buried deep inside a website and
give webmasters more control over and understanding of site indexing and frequency.
Page Submissions
Individual page submissions, on the other hand, can frequently be made directly to search engines
via their particular interfaces. This manual method of page discovery can be utilized when new
information is added to the site or when changes are made and you want to reduce the time it
takes for search engines to notice the changes.
Although Google recommends using XML sitemaps for big URL volumes, the manual
submission approach can be useful when only uploading a few pages. It's also worth noting that
Google only allows webmasters to submit 10 URLs every day.
Furthermore, Google claims that sitemaps take the same amount of time to index as individual
submissions.
Device Indexing
Google is shifting to a mobile-first indexing strategy, in which the mobile version of a site's
content is used to rank pages rather than the desktop version.
Google also aims to release a mobile page speed improvement in 2018, which will make page
speed a ranking element in mobile searches.
Christi Olson, Bing's head of search evangelism at Microsoft, said the company had no intentions
to launch a mobile-first index like Google.
In November 2015, Yandex began designating mobile-friendly pages in their index, and in 2016,
they released a mobile-friendly algorithm.
The mobile-friendly algorithm, code-named Vladivostok, did not result in pages that were not
considered mobile-friendly being removed from search results, although it was suggested that
such pages might not rank as highly for search users on mobile devices.
What is Search Engine Optimization?
"Search Engine Optimization" is the abbreviation for "search engine optimization." In simple
terms, it refers to the process of enhancing your website's exposure when visitors use Google,
Bing, or other search engines to look for products or services linked to your business. The higher
the prominence of your pages in search results, the more likely we are to draw new and existing
clients to your company.
How does SEO work?
Bots are used by search engines like Google and Bing to crawl the web, moving from site to site,
collecting information about those sites, and indexing them. Consider the index to be a big library
where a librarian can pull up a book (or a web page) to assist you in finding exactly what you're
looking for.
Then, using hundreds of ranking criteria or signals, algorithms examine sites in the index to
decide the order in which they should show in search results for a given query. The librarian, in
our library analogy, has read every single book in the library and can tell you which one will
provide the answers to your queries.
Our SEO success factors can be viewed as proxies for user experience aspects. It's how search
bots determine how well a website or web page can provide the searcher with the information
they're looking for.
You can't buy search engines to gain higher organic search ranks, unlike paid search ads,
therefore SEO experts must put in the effort. This is where we can help.
Our SEO factors table divides the criteria into six categories and assigns weights to each one
based on its overall value to SEO. Content quality and keyword research, for example, are critical
aspects of content optimization, while crawlability and speed are critical aspects of site layout.
A list of Toxins that distract from SEO best practices is also included in the newly revised SEO
Periodic table. These are shortcuts or tactics that may have been sufficient to assure a high
position back when search engines' algorithms were less sophisticated. And, for the time being,
they might even work—at least until you're detected.
In addition, we've added a new niches section that delves into the SEO success elements for three
main themes: Knowing the subtleties of SEO for local SEO, news/publishing, and each of these
for your small business, recipe blog, and/or online store, niches can help you rank higher in
search results.
The search algorithms are intended to bring up relevant, authoritative pages and provide a quick
search experience for users.
How website performance impacts conversion rates and SEO
What is a webpage’s conversion rate?
In web lingo, a user converts when they perform the action that the webpage's designers intended. A user
converts when they decide to buy a stroller and click the 'buy' button on an e-commerce page exhibiting
baby strollers, for example. However, a user does not need to make a purchase to convert, as a webpage
can serve a multitude of purposes. Filling up and submitting a contact form, answering survey questions,
or just clicking over to the next page on the website are all instances of user conversions.
The conversion rate refers to the percentage of total visitors who convert on a website. The conversion
rate is 2% if 100 people view a page on baby strollers and just two of them click the "purchase" button.
Conversion rate optimization (CRO) is the process of increasing this number. Conversion rate
optimization is a continuous process, because until a page's conversion rate is 100%, which is extremely
unusual, it can always be improved.
Conversion Rate Vs. Page Traffic
The conversion rate of a page is distinct from the total traffic, or number of visitors. Even if page traffic
remains constant, if a page's conversion rate decreases, the total number of users who convert decreases.
In contrast, if a page's traffic remains constant and the conversion rate rises, the overall number of
conversions rises.
How does site speed affect conversion rates?
Conversion rates are heavily influenced by the performance of a website. Fast page speed has regularly
been found to result in a higher conversion rate in studies. To put it another way, the faster a page loads,
the more likely a user is to take the desired action on that page.




What is the ideal loading time for a website? According to skilled.co, 47% of clients anticipate a
webpage to load in 2 seconds or less. According to skilled.co, mPulse Mobile, an AI healthcare
software startup, found that:
Pages that loaded in 2.4 seconds had a 1.9% conversion rate.
At 3.3 seconds, conversion rate was 1.5 %.
At 4.2 seconds, conversion rate was less than 1%.
At 5.7+ seconds, conversion rate was 0.6%.
Other companies have experienced similar results:



Walmart found that for every 1 second improvement in page load time, conversions increased by
2%.
COOK increased conversions by 7% by reducing page load time by 0.85 seconds.
Mobify found that each 100ms improvement in their homepage’s load time resulted in a 1.11%
increase in conversion.
These seemingly minor increases in conversion have a significant influence on a site's revenue. If
an e-commerce site generates $10 million in annual sales and the conversion rate improves by 2%
after the website's load time is reduced by a second (as in the Walmart case study), the revenue
increase is $200,000.
Website Speed, SEO and Conversion rate
Both conversion rate and SEO are affected by page speed. As a result, boosting it can help a
page's total traffic as well as its conversion rate. The Cloudflare CDN improves website
performance, allowing businesses and website managers to increase the number of visitors who
convert.
Web Performance and Conversion Rates
According to studies, the longer a website takes to load, the less conversions a company will
make through its principal touchpoint—your website.
Long page load times are a crucial consideration for your customer experience, whether you're an
e-commerce company selling things, a corporation attempting to collect subscribers, or an
organization trying to offer vital information (CX).
When it comes to website traffic, users aren't going to waste their time waiting when a more
frictionless user journey would be to look for another similar service, product, or information.
Here's an example of how a slight change in page load time has a detrimental influence on
conversion rates and customer satisfaction.
Above is an infographic from Web Performance that illustrates the impact of web
performance on conversion rates for Walmart.com.
Web Performance across all devices
Web speed must be considered across all devices in addition to desktop experiences. Many web
development businesses are adopting a mobile-first strategy now that they recognize that mobile
users will make up the bulk of their clients' audience.
When searching on a mobile device, users used to be more forgiving of poor page loading times,
but thanks to mobile services and advancements in web technology, this is no longer an
acceptable user experience. Any page load or web performance concerns should be addressed as
soon as possible in your online design.
This graph from Telegraph shows the percentage of people who use mobile and tablet devices
against those who use desktop computers. In 2016, mobile/tablet usage overtook desktop usage
for the first time.
Web Performance and Search Ranking
Slow website speed is not only bad for conversion rates, but it can also affect your site's SEO
performance. Since 2010, Google has used the time it takes for a webpage to load as another
element in determining search rankings.
"A poor page speed means search engines can crawl fewer pages using their allocated crawl
budget, and this could severely effect your indexation," according to Moz, a well-known leader in
search engine optimization tools.
5 Steps to Improve website speed
1.
2.
3.
4.
5.
Choose good website hosting.
Pay attention to the libraries.
Minify CSS/JavaScript.
Leverage Browser Caching when appropriate.
Enable compression.
Frontend and Backend websites
Front End and Back End:
The most commonly used phrases in web development are frontend and backend. These terms
are important in web development, but they are not interchangeable. To increase the website's
functionality, each side must communicate and collaborate efficiently as a single unit.
Front End Development:
The front end of a website is the section that the user interacts with directly. It's also referred to as the
application's 'client side.' Everything that users see directly is included: text colors and styles, photos,
graphs and tables, buttons, colors, and the navigation menu. The languages used for Front End
development are HTML, CSS, and JavaScript. Front End developers provide the structure, appearance,
behavior, and content of everything that appears on browser displays when websites, online applications,
or mobile apps are opened. The Front End's key goals are responsiveness and performance. The developer
must guarantee that the site is responsive, meaning that it works properly on devices of all sizes. No part
of the website should behave inappropriately regardless of screen size.
Front End languages:
The front-end portion is built by using some languages which are discussed below:





HTML: Hypertext Markup Language is the abbreviation for Hypertext Markup Language. It is a
markup language that is used to design the front-end portion of web pages. HTML is a markup
language that combines hypertext with markup. The term "hypertext" refers to the link between
web pages. Within the tag that specifies the structure of web pages, the markup language is used
to create the text documentation.
CSS: CSS (Cascading Style Sheets) is a simple language that was created to make the process of
making web pages presentable easier. Styles can be applied to web pages using CSS. More
crucially, CSS allows you to do so without relying on the HTML that each web page is built on.
JavaScript: JavaScript is a well-known programming language that is used to do magic on
websites in order to make them more interactive for users. It's utilized to improve a website's
functionality and run exciting games and web-based software.
UI: The "UI" stands for "User Interface" in UI designs. An application's user interface is its
graphical layout. It includes the buttons that users click, the text that they read, the graphics,
sliders, text entry boxes, and all other items with which the user interacts. This comprises
everything from the screen layout to the transitions and interface animations to each and every
micro-interaction. Every graphic element, interaction, and animation must be created.
UX: "User Experience" stands for "User Experience." The way a user interacts with the app
determines their overall impression of it. Is the experience pleasant and intuitive, or clumsy and
perplexing? Does it feel logical or random to navigate the app? Is it easier to connect with the app
and feel like you're efficiently completing the things you set out to complete, or does it feel like a
struggle? How easy or difficult it is to engage with the user interface elements that the UI
designers have built determines the user experience.
There are numerous different languages that can be used for front-end development depending on the
framework, such as Dart in Flutter, JavaScript in React, Python in Django, and so on.
Front End Frameworks and Libraries:




Angular JS: AngularJS is an open-source front-end framework written in JavaScript that is
mostly used to create single-page web applications (SPAs). It is a framework that is always
evolving and providing better ways to construct online apps. The static HTML is replaced by
dynamic HTML. It's an open-source project that may be downloaded for free. It adds Directives
to HTML attributes and uses HTML to bind data.
React.js: React is a JavaScript library for creating user interfaces that is declarative, efficient,
and customizable. ReactJS is an open-source, component-based front-end library that is only
responsible for the application's view layer. Facebook is in charge of keeping it up to date.
Bootstrap: Bootstrap is a toolkit for building responsive websites and web applications that is
free and open-source. It is the most widely used HTML, CSS, and JavaScript framework for
creating mobile-first, responsive websites.
jQuery: jQuery is a free JavaScript framework that makes it easier to deal with HTML/CSS
documents, specifically the Document Object Model (DOM), and JavaScript. jQuery simplifies


HTML document navigation and manipulation, browser event handling, DOM animations, Ajax
interactions, and cross-browser JavaScript programming, to name a few things.
SAAS: It's the most dependable, mature, and stable CSS extension language available. It's used
to easily extend the capabilities of a website's existing CSS, including variables, inheritance, and
nesting.
Flutter: Flutter is a Google-managed open-source UI developer SDK. Dart is the programming
language that powers it. From a single code base, it creates performant and attractive natively
generated applications for mobile (iOS, Android), web, and desktop. Flutter's main selling point
is the ease with which flat development can be done, as well as the expressive and flexible UI and
native performance. Flutter 2 will be released in March 2021, and it will improve flutter to
construct release applications for the web and the desktop.
Some other libraries and frameworks are Semantic-UI, Foundation, Materialize, Backbone.js,
Ember.js, etc.
Backend Development
The server-side of a website is referred to as the backend. It organizes and stores data, as well as
ensuring that everything on the client side of the website functions properly. It's the section of the
website you can't see or interact with. It's the part of the software that doesn't interact with users
directly. Users have indirect access to the pieces and attributes established by backend designers
via a front-end application. The backend includes activities such as writing APIs, creating
libraries, and working with system components without user interfaces or even scientific
programming systems.
Backend languages:
The backend portion is built by using some languages which are discussed below:






PHP: PHP is a server-side programming language that was created with web development in
mind. PHP is known as a server-side scripting language since it executes code on the server.
C++: It's a general-purpose programming language that's frequently utilized in competitive
programming nowadays. It's also a backend programming language.
Java: Java is a computer language and platform that is quite popular and widely utilized. It has a
lot of scalabilities. Components for Java are widely accessible.
Python: Python is a programming language that allows you to operate more quickly and
efficiently with systems.
JavaScript: JavaScript is a programming language that may be used on both the front end and
the back end.
Node.js- Node.js is a cross-platform runtime environment for executing JavaScript code outside
of a browser that is open-source. It's important to realize that NodeJS isn't a framework or a
programming language. The majority of folks are perplexed and believe it is a framework or
programming language. We frequently utilize Node.js to create back-end services such as APIs,
Web Apps, and Mobile Apps. Uber, Netflix, Wallmart, and other significant corporations employ
it in their production.
Backend Frameworks:


Back-end frameworks include Express, Django, Rails, Laravel, Spring, and more.
Other back-end programming and scripting languages include C#, Ruby, REST, GO, and others.
Difference between Frontend and Backend: Frontend and Backend development are quite
different from each other, but still, they are two aspects of the same situation. The frontend is what users
see and interact with and the backend is how everything works.



The frontend is the part of the website that visitors can see and interact with, such as the graphical
user interface (GUI) and command line, which includes the design, navigation menus, words,
photographs, and videos, among other things. On the other hand, the backend is the component of
the website that users cannot see or interact with.
Frontend refers to the visual aspects of a website that visitors can view and interact with. The
backend, on the other hand, is responsible for everything that occurs in the background.
HTML, CSS, and JavaScript are used on the front end, while Java, Ruby, Python, and.Net are
used on the backend.
Web Application Architecture: How the Web works?
When creating a web application, there are three important things to remember. The app should be simple
to use, appealing to the eye, and capable of meeting the bulk of the customer's requirements. From a
business aspect, a web application's product/market fit should be maintained. According to a software
engineer, an internet program should be scalable, useful, and able to withstand high traffic loads. All of
these issues are addressed by the web application's architecture.
What is Web Application Architecture?
What exactly is a web application, and how does it vary from a website?
A web application, in its most basic form, is a program that runs in a browser. It's not a website, although
the distinction is blurry. Remember these three formal qualities to distinguish a web application from a
webpage. A web application consists of the following components:
 Addresses a particular problem, even if it’s simply finding some information.
 Is as interactive as a desktop application.
 Has a Content Management System.
A website was once considered to be nothing more than a collection of static pages. Today's
websites, on the other hand, generally have both static and dynamic pages, making nearly all
modern websites— you guessed it! Applications that run on the internet.
How does the web request work?
To comprehend the components of web application architecture, we must first comprehend how
they are employed to do the most fundamental task: receiving and reacting to web requests.
Let’s look at Amazon.com to illustrate our explanation.
First, you visit Amazon.com. When you put in the URL and press Enter, your browser prepares
to recognize it because it needs to know the server address where the page is stored. As a result, it
transmits your request to the Domain Name System (DNS), which is a database of domain names
and IP addresses. If you've already visited Amazon using the same browser, the address will be
pulled from the cache. The browser then uses the HTTPS protocol to send the request to the
discovered IP address.
Second, the web server processes the request. Amazon.com's web server receives the request
and sends it to the storage area, which locates the page and all data associated with it. However, it
follows a Business Logic route (also called Domain Logic and Application Logic). BL controls
how each piece of data is accessed and creates a unique process for each application. The request
is processed by BL, which then sends it to storage to find the data that was requested.
Third, you receive your data. Your response is returned to you, and you see the web page's
content on your screen. The front end of an application is the graphical interface you see while
browsing through Amazon's or any other website; it depicts all UX and UI components so that a
user may obtain the information they came looking for.
Web application architecture components and Three-Tier Architecture
The majority of web applications are built by layering or tiering their principal functions. This
makes it simple to change and upgrade each layer separately. Multi or three-tier architecture is the name
given to this architectural arrangement.
Presentation layer
The presentation layer comprises of user interface components and UI process components that
facilitate interaction with the system and is accessible to users via a browser. HTML, CSS, and
JavaScript are the three main technologies used to create it. While HTML specifies what your
website will contain, CSS dictates how it will appear. JavaScript and its frameworks make your
website interactive, allowing it to respond to user input. To make the content on the page
dynamic, developers employ JavaScript frameworks like Angular and React.
Business Layer
This layer, also known as Business Logic, Domain Logic, or Application Layer, accepts user
requests from the browser, processes them, and decides the data access routes. A business layer
encodes the procedures by which data and requests pass through the back end. If your application
is a hotel booking website, for example, business logic will be in charge of the sequence of
activities that a traveler will go through when making a reservation.
Persistence Layer
The persistence layer, also known as the storage or data access layer, is a centralized place that
receives all data calls and gives access to an application's persistent storage. Because the
persistence layer and the business layer are so intimately linked, the logic knows which database
to talk to and the data retrieval process is more efficient.
A server and a Database Management System, as well as software to communicate with the
database, applications, and user interfaces for obtaining and parsing data, make up the data
storage infrastructure. In most cases, you can store your data center administration and
maintenance services while still having virtual access to your storage. You can use infrastructureas-a-Service, platform-as-a-Service, or serverless approaches to cloud administration by using
cloud technology providers such as Amazon, Google, or Microsoft.
What is website Builder?
A website builder is a program or platform that allows you to create a website
quickly and easily. These site builders assist you in developing your online presence,
a unique.com (or. Whatever) furnished with your brand's own elements, content, and
offerings, tailored to your specific business goals.
Drag-and-drop software is common in website builders, allowing you to customize
elements on a page with layouts selected from a small number (sometimes hundreds)
of available web page templates.
Some of the examples of Online Website Creation Tools are:
WordPress is a free and open-source website-building platform. WordPress is a
content management system (CMS) based in PHP that leverages a MYSQL database
on a more technical level. WordPress is the most user-friendly and powerful blogging
and website-building platform available today.
WordPress is a great platform for a wide range of websites. WordPress is a flexible
CMS that can be used for everything from blogging to ecommerce to company and
portfolio websites. WordPress is an excellent choice for both large and small
websites, as it was designed with usability and flexibility in mind.
Here are few examples of the types of websites we can build with WordPress:
 Blog- A blog is a sort of website dedicated to sharing ideas, images, reviews,
instructions, and recipes, among other things. The most recently written
content is usually displayed first on blogs.
 E-Commerce website- An e-commerce website allows us to sell goods or
services over the internet and receive money through a secure online
payment system. We can use a WordPress e-commerce plugin to augment
WordPress's default capabilities so that we can have an online store on our
site.
 Business website- Many firms can benefit from having their own website as
an online presence. WordPress is a wonderful alternative for your business if
you need a website for customers to learn about your company and what you
have to offer. Customers can get in touch with you, request a price, make an
appointment, and much more.
 Membership website- You can put content behind a paywall or need an
account login on a membership website. Users must login or pay for content
to view pages or posts. With the help of additional plugins, WordPress can
also manage membership websites.
 Portfolio Website- With a portfolio website built on WordPress, you can
show off your artwork, design talents, and more.
 Forum Website- A forum website may be an excellent resource for people
who want to ask questions or exchange tips. Many forum websites, believe it
or not, are powered by WordPress.



Event Website- Are you planning an event? WordPress makes it simple to
post event information and sell tickets.
E-learning website- Students can use an e-learning website to take online
classes, track their progress, obtain resources, and much more. You can
provide online courses from a WordPress website using a particular type of
plugin known as the WordPress LMS plugin.
Wedding Website- A wedding website built on WordPress can let you share
the specifics of your big day. With an array of WordPress wedding themes,
you can get a website up quickly and easily.
Joomla
Joomla is a content management system that is free and open-source (CMS).
It enables you to create dynamic webpages and applications with ease. It
includes an easy-to-use design that allows you to get the most out of its
features and functionality.
Joomla is written in PHP and uses object-oriented programming techniques
to store data in a MySQL database. It may be installed with a single click
from the web hosting management panel. Model View Controller (MVC) is
the design architecture used by Joomla. When Joomla receives a request, it
first evaluates the URL to identify which component will handle it, according
to the MVC pattern. The model stores the data that the component uses. The
Model is also responsible for keeping the database up to date as needed. The
view is responsible for producing the output. It can communicate with the
model to get the information it requires. When the view has produced the
output, the component returns control to the Joomla framework, which then
runs.
Drupal
Drupal is a free and open-source content management system that can be
modified to create simple or complex websites and web applications. Drupal
is multilingual and accessible, and the most recent release is the most
powerful and accessible version of Drupal to date. With Drupal's
accessibility and multilingual features, we're confident that you'll be able to
reach the audience you're looking to reach with your message. Drupal is easy
to design, and there are a number of desktop tools that allow you to create a
web application on your own computer. You can then choose a Drupal
hosting service provider that matches your demands. Any Drupal website
and/or application will run on a variety of platforms and may be simply
migrated.
DIFFERENCE BETWEEN ONLINE WEBSITE CREATION AND CUSTOM-BUILT WEBSITES
Most websites today are developed with a content management system, or CMS- which allows companies
to easily and quickly update their sites without technical support. By far the most popular is WordPress,
an open-source blogging tool and CMS, which as of 2017 has as much as 50-60 percent of the global
CMS market. Some of the other content management system platforms available include Joomla, CMS
Made Simple, DotNetNuke, and Drupal. Which system a developer uses for a particular site depends on a
variety of factors, including the technical requirements of your server and his/her own level of expertise
in the various platforms.
Sites developed using WordPress or another CMS platform can be custom, meaning the entire site is
designed from the ground up for a specific company's needs and brand, or they can be pre-made templates
or "themes" that can be purchased or downloaded for free. Depending on your objectives, goals, and
budget, both techniques have pros and cons, but not all websites are created equal.
THE PROS AND CONS OF TEMPLATE SITES
If the project is simple, such as a website that serves as an online brochure, a template site is
typically a good choice. The following are some of the benefits of using templates:
 Custom sites are substantially more expensive than template sites. When you use a template, the
majority of the website's coding is already in place, so your developer doesn't have to do
anything. As a result, template sites are far less expensive than custom sites, however your
developer will still have to spend time tweaking the template and putting the content in place.
 Template websites are simple to set up. This is due to the fact that much of the coding has already
been completed. A template site can be released in a matter of weeks if the content is almost
ready to go (which is often not the case—and is a major roadblock to having a site launched) and
your developer's timetable is clear. A custom site will take substantially longer depending on the
complexity of what you desire.
 Templates are becoming increasingly advanced. The greatest templates are well-designed, wellbuilt, and allow for a fair bit of flexibility.
USING TEMPLATES MIGHT HAVE SUBSTANTIAL DRAWBACKS, ESPECIALLY IF YOUR DEVELOPER ISN'T VERY
EXPERIENCED. THESE CAN INCLUDE THE FOLLOWING:
 It's likely that your website will look identical to those of your competitors. Although the most
popular themes have been downloaded thousands of times, smart designers can alleviate this issue
by using innovative graphics and personalization inside the template.
 Your visual design and navigation abilities are restricted. Although you can customize templates
to a big extent, especially the more expensive ones, you are mostly limited to the parameters of
the templates for visuals design and navigation. Simple design constraints, such as a lack of
symbol options, or more substantial ones, such as the inability to use a feature the way you want
it to work, are examples.
 Some templates aren't well-made or kept up to date. The importance of this cannot be overstated:
template sites are only as excellent as the template itself! Almost all themes these days are
responsive, meaning they adapt to the device being used to see them and instantly adjust to the
screen size of that device. WordPress, on the other hand, is updated frequently to remain on top of
security concerns; big updates happen a few times a year, and security fixes might appear as
needed. Unfortunately, not all template developers update their templates, so if you or your
developer installs a WordPress update, your template may break. As a result, you'll be forced to
use an earlier version of WordPress. As a result, your website may be more exposed to hackers.
Down the road
 In template sites, functionality may be reduced. In template sites, adding e-commerce and other
bespoke applications is difficult or impossible.
 Security can be a problem. Template websites are extremely appealing to people who enjoy
writing malicious code since they offer the ability to hack several sites at once. In an attempt to
improve WordPress security in particular, developers will sometimes customize a template site
using plug-ins (a plug-in is a piece of code that adds a specific functionality), but unless your
developer truly understands what he or she is doing, this can actually make the problem worse.
Furthermore, if you use a template that isn't updated on a regular basis to stay up with WordPress,
your site will be more exposed to hackers.
THE ADVANTAGES OF CUSTOM-BUILT WEBSITES
 Graphics and functionality are both unrestricted. A bespoke site can be programmed to perform
anything you can think of.
 Custom-built websites are adaptable and expandable. You might need to make big modifications
to your site's design and functionality in the future. If you're using a template site, you might have
to start over if you make significant modifications. It’s much easier to add new features to a
custom site.
 When WordPress is upgraded, custom-built sites are easier to update. Because your developer has
access to the site's coding, he or she will be able to resolve any issues that arise as WordPress is
updated. You're trapped with an older version of WordPress if a WordPress update breaks a
template site that hasn't been maintained by the template creator. This makes your website more
hacker-friendly.
 Custom-built websites perform better in terms of search engine optimization. Web developers
that create websites from the ground up have the technical expertise to ensure that your site is
search engine optimized. This is an important aspect of any digital marketing strategy,
particularly if you're targeting a certain geographic area or service/product group.
 E-commerce necessitates the use of custom-built websites. A template site is insufficient if you
want an online store that sells more than a few things.
HOW CAN WE TELL IF A WEBSITE IS CUSTOM-BUILT OR TEMPLATE?
It's usually obvious whether a website was built from the ground up or was based on a template. The first
step is to inspect the website's source code. Here's how you may obtain the code:
o In Google Chrome, go to: Open the site and click "view source" from the "Tools"
menu; alternatively, press Ctrl+U.
TOOLS AND TECHNIQUES AVAILABLE TO DESIGN AND DEVELOP A CUSTOM-BUILT WEBSITE
1. HTML
HTML stands for Hypertext Markup Language, and it is used to create web pages and
applications that are shown on the World Wide Web. Each page contains a sequence of
hyperlinks, or linkages or connections. Furthermore, web pages are made up of HTML,
which is used to display text, images, videos, and other resources through a web browser, and
a collection of webpages is merged and built into a single website, so if we don't have
HTML, we won't be able to make a webpage, which means we won't be able to build any
website.
2. HTML5
HTML5 is the most recent version of HTML for structuring and presenting material on the
World Wide Web. HTML5 supports both HTML and XHTML syntax, as well as new
markup, APIs, and error handling. Furthermore, HTML5 has new parsing rules that are not
based on SGML and are oriented toward flexible parsing and compatibility, as well as new
attributes such as charset on meta and a sync on script, as well as new semantic elements such
as header, footer, article, and section that were not available in previous versions. HTML5
also contains built-in video and audio playback, as well as diverse multimedia elements such
as audio and video. HTML5 has cleaner code than earlier versions.
3. CSS
It stands for Cascading Style Sheets, which are used to format webpage layouts and dictate
how HTML elements should be rendered on screen or in a browser. Similarly, it is used to
define the style of webpages, including design, layout, and display modification for various
devices and screen sizes, as well as saving time. Furthermore, CSS files are typically attached
to HTML files via the HTML file's links. If a user wishes to adjust the size of all H2
headings, for example, a single code can do it, but if there is no CSS file, the user must put
the code in each H2 heading individually.
4. CSS3
CSS3 is the most recent version of CSS, and it includes a number of new capabilities not
found in prior versions, such as distinct text effects and layouts. Similarly, CSS3 offers some
new features that make it easier to learn and understand, including a multi-column layout that
allows designers to show their information in numerous columns with parameters such as
column gap, column count, and column width. CSS# also has border and background options,
as well as animation, User Interface, and 2D/3D transformation.
5. SAAS
SAAS stands for Syntactically Awesome Style Sheet and is a pre-processor that is used to
describe the style of a document more powerfully and cleanly than CSS allows. It provides a
simpler and more elegant syntax for CSS and implements various features that are useful for
creating manageable stylesheets. For example, we wrote code on a stylesheet, but it was
unmanageable, and the CSS classes a div were poorly written, so SAAS assisted us in
managing the code, writing it properly, and generating it in a CSS file. Here's an example of
SAAS in action.
When we write code in SAAS, we must consider the following factors.
The code written in SASS is not manageable or in a proper manner, but it is changed in a
proper manner and provided in CSS in a manageable manner, as seen below.
Now, we can see that the code has been written really well and in a correct manner.
6. JavaScript
It is a scripting language used in web development to add dynamic and interactive
components to websites. It is also known as client-side scripting language because the source
code is processed by the client's web browser rather than the web server. It also makes
webpages interactive and dynamic by allowing them to respond to events, display special
effects, accept variable text, create cookies, and recognize the user's browser.
JAVASCRIPT FRAMEWORKS
 Angular JS
It is a JavaScript structural framework for creating dynamic web apps that can be
added to an HTML page using the <Script> tag, extends HTML attributes with
directives, and connects data to HTML using expression. AngularJS, too, has DOM
control structures for repeating, showing, and hiding DOM fragments, as well as
attaching new behavior to DOM components like DOM event processing.
Furthermore, it allows developers to create single-page applications, and its code is
unit testable and maintained by Google, allowing them to accomplish more
functionality with short code.
 Knockout JS
It's a JavaScript that lets you make rich, responsive user interfaces for display and
editing with a clean data model that follows the MVVM approach and separates the
application, UI, and view models. Furthermore, it is a pure JavaScript library that
works with any web framework and has a compact and lightweight library file.
Similar to declarative binding, automatic UI refresh, extendable, templating, and
dependency tracking, it provides an easy and clean approach to handle complicated
data-driven interfaces.
 React JS
It is also a User Interface framework that handles the view layer of online and mobile
apps and helps to design reusable UI components, and it is one of the JavaScript
front-end libraries developed and maintained by Facebook. Flux controls in ReactJS
make it easier to debug self-contained components of large ReactJS apps since they
leverage one-way data binding and application architecture. Furthermore, React JS
has a number of features, including JSX, react native, single-way data flow, and a
virtual document object model. Furthermore, React JS has the advantage of making it
easier to develop JavaScript using JSX and UI test cases, as well as increasing
productivity and facilitating subsequent maintenance.
 PHP with MySQL
MYSQL is a robust database server that is based on Relational Database
Management System (RDBMS) and capable of handling huge database connections.
PHP is one of the most popular server-side scripting languages for web development,
and it is completely free, open source, and server-side. Similarly, the combination of
PHP and MYSQL opens up previously unexplored possibilities for building nearly
any website, from a simple contact form to a large corporate portal. Both PHP and
MYSQL are free development tools, and PHP with MYSQL can create dynamic web
pages and allow visitors to interact while producing flexible and dynamic content.
Furthermore, when compared to other programming languages, PHP is incredibly
simple to use and master.
 ASP.NET with C#
It is a Microsoft server-side web application framework that is created for web
applications to produce dynamic web pages as well as to assist programmers in the
development of websites, applications, and web services. Furthermore, it permits the
use of full-featured programming languages like as C# and VB.NET to create
applications. C# is an Object-Oriented Programming language that is used to create a
variety of safe and robust applications that operate on the.NET framework, including
ASP.NET. Furthermore, we may construct windows client applications, client-server
applications, database applications, and many other types of applications using
ASP.NET and C#. C# comes with a number of features, including a powerful code
editor, a user-friendly user interface, and an integrated development environment.
 ASP.NET with SQL Server
It is a Microsoft Relational Database Management System (RDBMS) that is used to
organize and store information. A database server is a computer software that
provides database services to other computers using the client-server architecture. In
addition, we need PHP and MYSQL to develop dynamic websites, much as we
require ASP.NET and SQL server to build dynamic sides in.NET. We do have to pay
some fees to utilize SQL server, but it is more secure and safer than MYSQL. XML
data type support, Dynamic Management Views (DMVs), full-text search
functionality, and text mirroring are just a few of the services available in SQL
Server.
 Ruby on Rails
Ruby on Rails, also known as "ROR" or just "Rails," is an open-source Web
development platform written in Ruby, an object-oriented programming (OOP)
language akin to Perland Python. The main distinction between Ruby on Rails and
other development frameworks is the speed and simplicity with which developers
may operate inside the environment. Changes to apps are applied immediately,
avoiding the time-consuming procedures involved with the web development cycle.
Furthermore, it enables programmers to construct online applications considerably
more quickly by reducing the number of steps required, and it includes various
packages such as Active Record, Active Resource, Action Pack, Action Web
Services, Action Mailer, and Active Support. Furthermore, it was originally built for
the Mongrel Web Server, but it currently supports a wide range of servers and
databases, including MYSQL, PostgreSQL, SQL Server, and DB2.
 Cold Fusion
Cold Fusion is a web application development platform that allows you to create
modern web applications quickly. ColdFusion is a strong and expressive
programming language. The expressiveness of the language allows you to program at
a greater level than most other languages. This powerful feature allows you to
integrate crucial web application features including database access, MS Exchange
access, PDF form production, and more. Similarly, ColdFusion has the ability to
break down a website into distinct parts that may be saved in a database and then
reassembled to create web pages and e-mail newsletters. Furthermore, it has its own
markup language called Cold Fusion Markup Language (CFML) and Extensible
Markup Language (EML), which is used for a variety of purposes including website
development, application development, mobile application development, and legacy
maintenance. It provides good run-time performance and is simple to manage data
and information when used within an existing ColdFusion application.
THE TECHNOLOGIES, MANAGEMENT SERVICES, TOOLS AND SOFTWARE CHOSEN TO BUILT WEBSITE.
To build the site I am going to use different software and tools which helped to complete the site and
they are described below:

HTML5
HTML5 is the most recent version of HTML for the structure and presentation of World Wide Web
content. HTML5 supports both HTML and XHTML syntax, as well as various new markup, APIs, and
error handling capabilities. In addition, HTML5 has new parsing rules that are not based on SGML and
are oriented toward flexible parsing and compatibility, as well as new meta and script attributes like
charset and async, as well as new semantic elements like header, footer, article, and section that were not
available in previous versions.

CSS3
CSS3 is the most recent version of CSS, and it includes several new capabilities not found in prior
versions, such as distinct text effects and layouts. Additionally, CSS3 offers a multi-column layout that
allows designers to show their text in numerous columns with definitions such as column gap, column
count, and column width, making it easier to learn and understand. CSS3 also includes border and
background options, animation, user interface, and 2D/3D transitions.

JavaScript
It is a scripting language commonly used in web development and is used to add dynamic and interactive
elements to the website as well as the client-side scripting language, which means that the source code is
processed by the web browser of the client instead of the web server. It also provides interactive and
dynamic web pages and enables pages to react to events, display special effects, accept variable text,
create cookies and detect user browsers.

Photoshop
It is a strong software that is mostly used for raster image editing, graphic design, and digital layout, and I
will be using it to create the site's layout as well as wireframes for the login and landing pages. Similarly,
it uses a layer-based editing system that allows multiple overlays to create and alter images that support
transparency, and there are various features in Photoshop that aid in quick editing and time savings. I will
also use this software to crop the image, determine the width and height of the image, and create the
company logo.

jQuery
jQuery is a JavaScript library that allows web developers to add more functionality to their websites.
When the jQuery library is loaded, a webpage can call any jQuery function supported by the library. Text
manipulation, form data processing, manipulating items on a website, and animation are all common
instances.

Sublime Text Editor
It is a source code editor that supports several programming languages as well as markup languages and is
available under a free software license. Similarly, I will utilize this software to write code and to assist in
the addition of other plugins. This software is what I'm using because it has a lot of new capabilities that
other software doesn't have, and it's also incredibly simple to use.
Wireframe
A wireframe is a black and white line drawing that can be used in web design to give stakeholders a
visual representation of the layout and information architecture of a web page. Wireframes use boxes of
various sizes to represent elements of the webpage such as the header, footer, search fields, site
navigation, body content, and many others. There are a variety of tools and applications that can be used
to create a wireframe for a website, such photoshop and illustrator. For this site, I am going to use
photoshop because it is easier to create the frame and layout.
Furthermore, having a wireframe in the site allows me to focus more on the user experience, makes it
easier to build layout and structures, and allows me to add new features while saving time. Furthermore,
the major objective of a wireframe is to picture the site's functionality, behavior, and contentment, and it
is utilized to communicate to clients and stakeholders how the actual website will be laid out.
SCREENSHOTS OF ND’S CAFÉ:
CODE OF ND’S CAFÉ
Test plan of ND’S Food Mario Website:
Test log of Admin login:
Test Case
Input Data
Test Case
description
Enter username and
password
Expected Output
Admin Login
Enter admin and admin
Admin login
Enter admin
Enter password
Enter valid username
Admin login
Enter admin
Enter username
Enter valid password
Successful login
Admin login
Test log of Member login:
Test case
Enter asd and ssds
Enter invalid username
and password
Enter valid username
and password.
Input data
Test case
description
Enter username and
password
Expected output
Admin login
Enter cat and admin
Successful login
Admin login
Enter admin
Enter password
Enter valid username
Admin login
Enter admin
Enter username
Enter valid password
Admin login
Enter mouse and
Logitech
Enter invalid username
and password
Enter valid username
and password.
Bibliography
designhammer. (2020). website performance. none, 1.
none. (2019). Website Development- Introduction. Tutorialspoint, 25.
none. (2020). CSS: Cascading Style Sheets. mdn web docs, 1.
none. (2020). Framework. Techterms, 1.
none. (2020). How does DNS work? Domain Name System, 5.
none. (2020). PHP. tutorialspoint, 1.
none. (2020). Sublime Text Editor. Sublime text , 1.
none. (2020). What is Domain Name and How does it work? Domain Name system, 5.
none. (2020). What is Notepad++? Notepad++, 1.
none. (2021). search engine. computer hope, 1.
none. (2021). Web Technology. GeeksforGeeks, 1.
none. (2021). What is JavaScript? Hack Reactor, 1.
none. (2022). HTML. mdn web docs, 1.
none. (n.d.). What is DNS? Domain Name System. What is a Domain Name and How does DNS work?
purplecow. (2020). website. none, 1.
searchmetrics. (2021). none. website ranking, 1.
shaw, K. (2020). DNS. DNS.