International Study Centre

Engineering, Science and Computing (ESC) Department

XPX0015 Computing Module

Tutor Name: Eliza Mazlan

Project Title: Web Design Using HTML, CSS and JS

Date of Submission: 2nd Aug 2021

Student Name: Type name here

MAHA ALI A A AL-DOSARI

Student ID. Number: Type Id Number here

U2166063

1
Contents

1 Project Introduction, Aim and Objectives..........................................................................3

1.1 Introduction.................................................................................................................3

1.2 Current Trends.............................................................................................................3

1.3 Evaluation of Similar Websites...................................................................................4

1.4 Aim and Objectives.....................................................................................................4

2 Project Description.............................................................................................................4

3 Project Implementation.......................................................................................................5

3.1 Home Page...................................................................................................................5

3.2 Order Page...................................................................................................................5

3.3 Thank You Page..........................................................................................................6

3.4 Contact Page................................................................................................................6

4 Project Results....................................................................................................................6

5 Project Conclusion and Future Work..................................................................................9

6 Refrences............................................................................................................................9

2
1 Project Introduction, Aim and Objectives
1.1 Introduction
HTML stands for HyperText Markup Language. It is a common markup language for Web
site development. In Hypertext structures, data can be assessed through non-linear paths. So,
these kinds of systems allow reading of multidimensional documents or data by following
multiple tracks. HTML codes simply consist of data which is to be presented to the user and
mark up instruction on how to structure and present the data. This data is retrieved by the
browsers following HyperText Transfer Protocols (HTTP).
The visual presentation of website is implemented using Cascading Style Sheets (CSS)
syntax. The distinct division of duties between markup and style can provide numerous
production, maintenance, and even performance benefits, making it a far superior
presentation solution to markup alone. CSS provides a major advantage of control over the
website’s visual design. (Thomas A. Powell, 2009)
JavaScript is used to include advanced functionalities in the website. Most of the interactive
features of the website are scripted in JS. Hence, it can be said that Web Programming
comprises of three layers each layers is used for its specific purposes in the website. (What is
JavaScript?, 2005-2021)
I have implemented all these scripts for my website for different purposes.
1.2 Current Trends
During recent times, moderns requirements and up gradation of technologies are driving new
trends in the field of web development. Some of these are:
Progressive Web Application: PWA run independently of the browser and work as native
app on the mobile phones as well as desktop.
Artificial intelligence (AI) and bots: Advances in field of AI are shaping the field of web
development as bots are being used to collect and analyze data for various web requirements.
Accelerated Mobile Pages (AMP): Open sources plugins developed by leading vendors like
Google etc. are being deployed to accelerate the speed of web pages on mobile devices.
Single Page Application (SPA): It is also one of the modern trends in the field of websites. It
provides better data protection and higher speeds.
Voice Search Optimization: As the voice commands features are getting more common in
smart devices, web development is also becoming more voice friendly and less texty.
Motion UI: Motion UI takes the advantage of custom built animations along with CSS based
transition effects, in this way digitals product on the websites are built more easily.

3
Automation Testing: Automation techniques for product testing are emerging rapidly. AI and
machine learning techniques are being used to create complex projects.
JavaScript Frameworks: JS Frameworks are being deployed to make easy and standardize
the frontend development.
Serverless Applications and Architecture: These techniques are used to avoid overloading of
the system and loss of data and can also cut the cost of development.
Blockchain Technology: As major payments solutions are now accepting cryptocurrencies,
blockchain trading is now getting more popular. (Lozhko, 2021) (Kikidzhan, 2021)
1.3 Evaluation of Similar Websites
https://tipsystrawberries.com/
This is a similar website which has 5 pages and offers online ordering of the products related
to desserts. In this website, user can create their own account and log in to view their past
orders.
https://kashmiridelight.ca/
This is also a website of the restaurant offering online ordering option as well. The website
has three pages and cart of items already selected to buy.
https://tgexpressthaifood.com/
This website is also offering online food ordering for the restaurant. It consists of 4 pages.

1.4 Aim and Objectives

 Development of a website for a local restaurant
 The user can order the food which should be delivered
 The website should include categories of items e.g. main entries, drinks and dessert
 Total cost of the order should be displayed

2 Project Description
I have developed a website of a restaurant which offers online ordering options of different
categories of food. There are 3 pages:
Home page (index.html ) which contains a hero section with welcome heading. Then wnd
secton is about menu or product list. This page is made with html and css.
Order page (order.html) which contain a form. The form contains the different input field to
choose the menu items and also contain person info field for user required to place order.
This page made with html css and a js file is also linked with this page which performs the
different operations i.e. it calculates the Grand total. It also helps to display the items name

4
and quantity with its charges. It also checks that the user entered the name and email in the
input field or not. If not then it displays error. And all fields are filled then it display grand
total loader which means its processing and then the user is redirected to thank you page.
Thank you page (thank-you.html) which contain thank you heading.

3 Project Implementation
In order to implement the required design of the website, following are the codes which I
have written for each section.
3.1 Home Page
 Header section of the Home Page is written from index.html:13 to index.html:27.
 Hero section of the Home Page is from index.html:30 to index.html:35
 Results of Header section and Hero section is shown in Figure 1.
 Main content of the Home page which includes menu section, categories of items and
lists of all the items including their description and pricing is from index.html:38 to
index.html:233.
 Results of this section are shown in Figure 2 and Figure 3.
 Footer of the Home Page is from index.html:234 to index.html:236 which include copy
right message and it can also be seen at the bottom of Figure 3.
 The website has been made responsive through the use of Meta Tag.
 All the required tags for the assignment have been included in the code.
3.2 Order Page
 Order page is accessed either through the main link at the navigation bar of the site or by
clicking at “Order Now” button of any product.
 Header section of Order Page is from order.html:13 to order.html:27.
 It is same as the Home Page as it can be seen in Figure 4.
 Hero section of the Order Page is from order.html:30 to order.html:34.
 This section has different text than the Home page shown in Figure 4.
 Order Form is from order.html:41 to order.html:150.
 This section takes input from the user for each of the category and also acquires email of
the user. After completing the form, total cost of the order is also shown at the bottom
shown in Figure 5.
 Footer of the Order Page is from order.html:156 to order.html:158 its shown at the bottom
of Figure 5.
3.3 Thank You Page

5
 Header section of the Thank You Page is from thank-you.html:13 to thank-you.html:27.
 Thank you message is from thank-you.html:31 to thank-you.html:36.
 Footer section of the page is from thank-you.html:41 to thank-you.html:43.
 Results are shown in Figure 6.

3.4 Contact Page

 Just like other pages, Navigation is same for contact page.
 Main Contact or Address section is from contact.html:34 to contact.html:39.
 Results of this page are shown in Figure 7.

4 Project Results

Figure 1: Header Section and Hero Section of Home Page with Name Bar at the Top it can be noted that
colors are different for page links depending on weather the page has been visited or not or is being
currently active

Figure 2: Categories of items and Main Menu section of the Home page

6
Figure 3: Category wise lists of the products at Home Page and Footer section

7
 Figure 4: Hero Section of Order Page

Figure 5: The order placing form having different inputs and Grand Total at the bottom

Figure 6: Thank You messages page after successful order placing

8
 Figure 7: Contact page

5 Project Conclusion and Future Work

I have tried to implement a simple restaurant website with online ordering system. I have
achieved the requirement of the project. The website accepts the order and leads to Thank
You page. However, in typical websites of this type, a payment gateway is used and
integrated where the customer makes payments. A checkout page is used where all the details
of order are provided. Hence, for future work, these features can be included in the website.
Also, some websites offer custom order feature, where user can create an order according to
their taste. This feature can also be included.

6 Refrences
Kikidzhan, K. (2021). The Latest Trends in Web Development to Follow in 2021. Retrieved
from Codica: https://www.codica.com/blog/top-web-development-trends/

Lozhko, M. (2021). 15 Top web development trends in 2021. Retrieved from LANARS:
https://lanars.com/blog/top-web-development-trends

Thomas A. Powell. (2009). HTML & CSS: The Complete Reference, Fifth Edition. Mc Graw
Hill.

What is JavaScript? (2005-2021). Retrieved from MDN WEb Docs:

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/
What_is_JavaScript