CHAPTER 1: INTRODUCTION

1.1 Introduction about Institute

Glorious is a dynamic and innovative web development institute located in moga, dedicated to
fostering a learning-centric environment for individuals aspiring to excel in the field of web
development. The institute stands at the forefront of technology, providing a platform for
enthusiasts to acquire practical skills and hands-on experience in HTML, CSS, and JavaScript.

Glorious founded with a passion for excellence in web development, has emerged as a leading
player in the industry. The company's commitment to staying abreast of the latest technological
advancements is reflected in its training programs, designed to equip individuals with the skills
demanded by the ever-evolving digital landscape.

The HTML, CSS, and JavaScript training program offered by Glorious in Moga is a
comprehensive initiative aimed at empowering participants with the fundamental skills required
for modern web development. The structured curriculum, delivered by experienced industry
professionals, provides a balanced blend of theoretical knowledge and practical application.

This training report serves as a documentation of the immersive learning experience gained at
Pixel out during the HTML, CSS, and JavaScript training. It captures the essence of the training
program, highlighting key learnings, challenges overcome, and the practical applications of the
acquired skills.

1
1.2 Introduction about project

In the dynamic realm of web development, the fusion of aesthetics and functionality plays a
pivotal role in engaging users and delivering a seamless online experience. The project at hand is
a testament to this philosophy a robust and visually appealing static restaurant website crafted
with a blend of HTML, CSS, JavaScript, and Bootstarp.

Project Overview: This project is a creative endeavor to design and develop an interactive and
user-friendly restaurant website, aimed at providing the details about our restaurant. The
incorporation of HTML, CSS, and JavaScript lays the foundation for the website's structure,
style, and dynamic features, while Bootstarp5 adds a layer of interactivity and responsiveness to
enhance the overall user experience.

Key Features:

Responsive Design: The website boasts a responsive layout, ensuring optimal viewing and
interaction across a variety of devices, from desktops to smartphones. The responsiveness is not
merely a design choice but a strategic approach to accommodate the diverse ways users access
web content.

Beautiful Design Elements: The visual aesthetics of the website are meticulously crafted,
incorporating modern design principles to create an engaging and visually pleasing experience.
From the layout to color schemes and typography, each element is chosen with the user's
experience in mind.

Dynamic Navbar: The website features a dynamic and responsive navigation bar built using
JavaScript and Bootstarp. The navbar adapts seamlessly to different screen sizes, providing an
intuitive and accessible means of navigating through the various sections of the website.

Project Goals:
Beyond the technical aspects, the project aims to fulfill specific goals:

User Engagement: The website is crafted with the user in mind, aiming to not only inform
about restaurant services but also to engage and inspire. Dynamic elements and well-curated
content encourage users to explore and interact with the site.

2
Technological Proficiency: By integrating Bootstarp, the project showcases an
understanding of modern web development frameworks. The modular nature of React
components facilitates code organization and enhances the project's maintainability.

Purpose of the Project: The primary objective of this project is to showcase the practical
application of HTML, CSS, JavaScript, and Bootstarp in the creation of a static website with a
focus on the restaurant. The project not only serves as a testament to technical proficiency but
also as a portfolio piece, demonstrating the ability to amalgamate design aesthetics with
functional web development.

As we delve deeper into the subsequent sections of this project report, we will explore the
methodologies, challenges, and triumphs encountered during the development process, shedding
light on the intricate details that contribute to the success of this restaurent website.

3
 CHAPTER 2: SYSTEM REQUIREMENTS & ANALYSIS

2.1 Choice of platform used

The development of the restaurant website during my training project involved a careful
selection of platforms and technologies to ensure a robust and effective implementation. The
choice of platforms was driven by the project's goals of achieving a responsive design, dynamic
interactivity, and an engaging user experience.

1. HTML and CSS:

The foundational elements of HTML and CSS were chosen for their fundamental roles in web
development. HTML provided the structural backbone of the website, defining the layout and
organizing content in a logical manner. CSS, on the other hand, was instrumental in styling and
presenting the visual elements of the website. The combination of these two platforms ensured a
clean and well-organized structure with an aesthetically pleasing design.

2. Bootstrap

Bootstrap is one of the popular front-end frameworks which has a nice set of
predefined CSS codes. The updated version of Bootstrap5 was officially released on 16 June
2020. Bootstrap is a CSS framework that makes mobile-friendly web development and provides
responsiveness.
The framework is available for free and can be utilized in two ways either by downloading the
zip files and incorporating Bootstrap libraries/modules into the project or by directly including
the Bootstrap URL and using the online version.

3. Responsive Design:
The choice to prioritize responsive design was integral to the selection of platforms. This
involved employing media queries and flexible grid layouts to ensure a seamless user experience
across a spectrum of devices. Platforms such as Bootstrap and Flexbus were utilized to
streamline the responsive design implementation, enhancing accessibility and usability.

4. Version Control (Git):

The adoption of version control, particularly Git, played a crucial role in managing the
development process collaboratively. By using Git, the project benefitted from version tracking,
collaboration, and the ability to revert to previous states if needed. This choice facilitated a more
organized and efficient development workflow.

4
The combination of these platforms empowered the project with the tools necessary to create a
sophisticated and user-centric restaurant website. The strategic selection of HTML, CSS,
JavaScript, Bootstarp, and version control not only aligned with the project's objectives but also
ensured a foundation that is scalable, maintainable, and adaptable to evolving web development
standards.

In the subsequent sections, we will delve into the implementation details, challenges faced, and
the successful outcomes achieved through the thoughtful utilization of these platforms.

2.2 hardware requirement

The development and testing of the restaurent website were undertaken on standard computing
hardware. The following table outlines the minimal hardware specifications recommended for a
smooth development experience:

Hardware Component Minimum Requirement

Stroage 128 GB SSD or higher

Processor Dual-core processor, 2.0 GHz or higher

RAM 4 GB or higher

Operating System Windows 7 or mac iOS 10.14 or later

Display 1366 x 768 resolution or higher

These specifications ensure that the development environment runs efficiently, allowing for a
seamless coding and testing experience. It's important to note that these requirements are
minimal and can be easily met by most contemporary laptops or desktops.

For a more specific breakdown or if your project has additional considerations, you may need to
tailor the hardware requirements accordingly. Additionally, if your project involves more
resource-intensive tasks, such as server deployment or database management, you might want to
provide separate specifications for those components.

In the subsequent sections, we will explore the software tools and platforms utilized to bring the
restaurant website project to fruition.

5
2.3 Project

Details Project

Goals:
The primary goal of the restaurant website project was to create an engaging and responsive
online platform that caters to enthusiasts. The project aimed to showcase the practical application
of HTML, CSS, JavaScript, and Bootstarp in developing a modern, visually appealing, and
interactive static website. Specific objectives included:

1. Responsive Design: Implement a responsive layout to ensure optimal viewing and

interaction across various devices.

2. Dynamic Navbar: Develop a dynamic navigation bar using JavaScript and Bootstarp to
enhance user navigation and interactivity.

3. Aesthetic Design: Craft a visually pleasing design with modern aesthetics, leveraging
appropriate color schemes, typography, and imagery.

4. User Engagement: Incorporate interactive elements and engaging content to captivate

visitors and encourage exploration of the website.

Features:

1. Responsive Design:
- Utilized media queries, Flexbox, and Bootstrap to create a responsive layout that adapts to
different screen sizes.

2. Dynamic Navbar:
- Implemented a dynamic navigation bar using Bootstarp, offering a smooth and intuitive
browsing experience.

3. Aesthetic Design:
- Selected a visually appealing color palette and typography to create a cohesive and modern
design.

4. Interactive Elements:
- Integrated JavaScript for client-side validation and interactive features, enhancing user
engagement.

6
Methodologies:
The development process followed an agile methodology, emphasizing iterative development
and continuous feedback. The project lifecycle involved the following phases:

1. Requirements Analysis: Defined project goals, features, and user expectations.

2. Design: Created wireframes and design mockups to visualize the layout and aesthetics.

3. Development: Implemented the website using HTML, CSS, JavaScript, and Bootstarp, with
a focus on modular and scalable code.

4. Testing: Conducted thorough testing to ensure functionality, responsiveness, and cross-

browser compatibility.

5. Deployment: Deployed the static website to a hosting platform for public access.

2.3 Challenges faced

The web development training program presented a series of challenges that, while demanding,
ultimately contributed to a deeper understanding of the subject matter. Here, I outline key
challenges encountered and the strategies employed to overcome them:

1. Cross-Browser Compatibility:
Challenge: Ensuring consistent performance across different web browsers proved challenging
due to varying rendering engines and compatibility issues.

Resolution: Conducted thorough testing and utilized browser developer tools to identify

and address cross-browser inconsistencies. Engaged in discussions with peers and mentors to
share insights and solutions.

2. Responsive Design Complexities:

Challenge: Designing responsive layouts that seamlessly adapted to diverse screen sizes and
resolutions posed challenges, especially when handling intricate page structures.

Resolution: Embraced mobile-first design principles, extensively tested layouts on various

devices, and incorporated CSS media queries to ensure responsiveness. Engaged in peer reviews
for feedback and improvement.

7
4. Adapting to New Technologies:

Challenge: Rapid changes and updates in web development technologies demanded constant
adaptation, presenting a continuous learning curve.

Resolution: Prioritized staying informed through continuous reading, online resources, and
participation in relevant webinars. Embraced a growth mindset and approached challenges as

8
 CHAPTER 3: SDLC PHASES

3.1 Recognition of Need

To make A good website which is Responsive(perfect work on mobiles, laptop etc.) ,modern
design) The initiation of the website project stemmed from a thorough recognition of a
prevailing need within the restaurant industry.. Recognizing this shift in consumer behavior, it
became evident that there was an unmet need for a comprehensive and user-centric online
presence for our restaurant.

Industry Trends and User Behavior:

1. Digitalization of customer Services:

For make customer to visits in the restaurant the location is mentioned in the website. Many
other features are added like Feedback, complaint box in the website.

2. Increased Online Engagement:

Now days the social media in the peak level so we add the our ’s facebook, restaurant website
and many other link to make a relation with us. A static online presence was identified as a
limitation in catering to the growing demand for interactive and engaging food experiences.

3. Accessibility and Convenience:

The modern user values accessibility and convenience. A need was recognized for a user-
friendly and responsive website that can be accessed seamlessly across various devices, offering
information about the services and promoting a hassle-free user experience.

Project Alignment with Organizational Goals:

The website project aligns closely with the organizational goals of enhancing brand visibility,
attracting new members, and fostering a sense of community among existing members. By
recognizing the need for an effective online presence, we aim to bridge the gap between
traditional restaurant offerings and the evolving expectations of our target audience.

User-Centric Approach:
The decision to embark on this project was driven by a commitment to a user-centric approach.
Understanding the evolving needs and preferences of our target audience is integral to

9
maintaining relevance and establishing a meaningful connection with current and potential
restaurant members.

In the subsequent sections of this report, we will delve into the project's goals, features, and the
methodologies employed to address the recognized need for a dynamic, engaging, and
responsive online presence for our restaurant.

3.2 Feasibility

study Introduction:
The feasibility study for the restaurant website project is conducted to evaluate the practicality
and viability of developing and implementing an online platform for our restaurant. The study
addresses key aspects such as technical feasibility, operational feasibility, economic feasibility,
and scheduling feasibility.

3.2.1 Technical Feasibility:

1. Hardware and Software Requirements:

The technical requirements for the project, including hardware and software, are well within the
capabilities of our existing infrastructure. The development tools (HTML, CSS, and Bootstrap)
are widely supported and do not pose any significant technical barriers.

2. Development Team Competency:

The development team possesses the necessary skills and expertise to implement the project
successfully. Training programs have been conducted to ensure familiarity with the chosen
technologies.

3. Technology Scalability:
The technologies chosen for the project, including Bootstarp, ensure scalability for future
enhancements. This enables the addition of new features and functionalities as the restaurant's
online presence evolves.

3.3 Code Generation

In this section, we provide a closer look at the code generation process for the restaurant website
project. The primary structure and organization of the code are encapsulated in the App
component, serving as the entry point for the application.

10
 HTML and Bootstrap of index page:

<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></
script>
<link href="jobansite.css" rel="stylesheet" >
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
integrity="sha384-
Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-

awesome.min.css">
<meta charset="utf-8">
<title>my site 2</title>
</head>

<body>

<div class="container-fluid bg-dark p-5 text-white sticky-top">

<div class="row">
<div class="col-sm-12" >

<ul type="none" class="top1">

<li><img src ="logo.png" class="imgr p-1"></li>
<li><a href="file:///C:/Restaurant_files/mysite2.html"
class="link1">home</a></li>
<li><a href="file:///C:/Restaurant_files/menu.html" class="link1">
Menu</a></li>
<li><a href="file:///C:/Restaurant_files/about.html" class="link1">
about</a></li>

11
 <li><a href="file:///C:/Restaurant_files/gallery.html"
class="link1">gallery</a></li>
<li><a href="file:///C:/Restaurant_files/contactus.html" class="link1"> contact
us</a></li>
<li><button type="button" class="btn-outline-warning"><a
href="file:///C:/Restaurant_files/makereservation.html?">Make areservation</a></button></li>
<li><input type="text" value="search"></li>
</ul>
</div></div>
</div>

<div class="container-fluid bg-primary">

<div class="row">
<div class="col-sm-5 bg-light text-white"><img src="plate.png" class="img1"></div>
<div class="col-sm-7 bg-light text-black p-3"><center><h1><i><b>The Spectacle
Before Us<br>
Was Indeed Sublime</b></i></h1>
<br><h4>
<i>Apparently, we had reached a great height in the atmosphere, for the sky was a dead black,
<br>and which lifts the horizon of the sea to the level of <br>the spectator on a
hillside.</i></h4>
<button type="button" class="btn btn-outline-primary"><a
href="file:///C:/Restaurant_files/order.html">order online</a></button>
<button type="button" class="btn btn-warning"><a
href="file:///C:/Restaurant_files/contactus.html" class="link1">our location</a></button>
</center></div>
</div></div>

<div class="containers-fluid bg-light text-center fs-1">Main Menu <br><h3>Taste Our

Foods & Enjoy</h3></div>

<div class="container d-flex bg-light">

<div class="row no-gutters">

12
 <div class="col-sm-3 align-item-center bg-light"><img
src="bigimg.jpg" class="img8" alt=""/></div>

<div class="col-sm-3 align-item-center bg-light"><img

src="4.jpg" class="img8" alt=""/></div>

<div class="col-sm-3 align-item-center bg-light"><img

src="bowl-calcium-cereal.png" class="img8" alt=""/></div>

<div class="col-sm-3 align-item-center bg-light"><img src="bowl-

delicious-dinner.png" class="img8" alt=""/></div>

</div></div>

<div class="container bg-light p-2">

<div class="icon-bar">
<a href="#"><i class="fa fa-coffee "></i></a>
<a href="#"><i class="fa fa-heart"></i></a>
<a href="#"><i class="fa fa-file-archive-o"></i></a>
<a href="#"><i class="fa fa-smile-o"></i></a>

</div>
</div>

<div class="row no-gutters overflow-hidden p-5">

<div class="row">
<div class="col-lg-4 border-lg-right border-2x border-300 px-5" data-zanim-xs>

<div class="row">
<div class="col d-flex justify-content-between">
<h6 class="fs-0 font-weight-bold text-uppercase text-black mr-
4">Breakfast Bowl</h6>
<p class="text-danger font-weight-bold mb-0">$8.50</p>
</div>
</div>

13
 <p class="w-xl-75 text-600 mb-4">Black Bean
Cake, Greens, Tomato &amp; Avocado Pico drizzled with Lime Cream (Add egg $1)</p>

<div class="row">
<div class="col d-flex justify-content-between">
<h6 class="fs-0 font-weight-bold text-uppercase text-black mr-4">EGG
SANDWICH</h6>
<p class="text-danger font-weight-bold mb-0">$7.50</p>
</div>
</div>

<p class="w-xl-75 text-600 mb-4">Everything

Bagel with Cream Cheese, Bacon, Tomato, Red Onion, Basil Pesto, Arugula</p>

<div class="row">
<div class="col d-flex justify-content-between">
<h6 class="fs-0 font-weight-bold text-uppercase text-black mr-
4">BREAKFAST BURRITO</h6>
<p class="text-danger font-weight-bold mb-0">$9.50</p>
</div>
</div>

<p class="w-xl-75 text-600 mb-4">Three

Scrambled Eggs, Cheddar, our Housemade Black Bean Cake, Avocado, Pico, &amp; Lime
Cream</p>
</div>
<div class="col-lg-4 border-lg-right border-2x border-300 px-5" data-zanim-
xs>

<div class="row">
<div class="col d-flex justify-content-between">
<h6 class="fs-0 font-weight-bold text-uppercase text-black mr-
4">VEGGIE JAMMIE</h6>
<p class="text-danger font-weight-bold mb-0">$5.50</p>
</div>
</div>

<p class="w-xl-75 text-600 mb-

4">Everything Bagel with our Homemade Tofu Herb Spread, Cucumber Tomato, Red Onion,
&amp; Arugula</p>

14
 <a class="text-decoration-none">

<div class="row">
<div class="col d-flex justify-content-between">
<h6 class="fs-0 font-weight-bold text-uppercase text-black mr-
4">BAGEL WITH CREAM CHEESE</h6>
<p class="text-danger font-weight-bold mb-0">$6.00</p>
</div>
</div>

<p class="w-xl-75 text-600 mb-4">Plain,

Cranberry, or Everything</p>
</a><a class="text-decoration-none" >

<div class="row">
<div class="col d-flex justify-content-between">
<h6 class="fs-0 font-weight-bold text-uppercase text-black mr-
4">BREAKFAST PASTRIES</h6>
<p class="text-danger font-weight-bold mb-0">$9.00</p>
</div>
</div>
<p class="w-xl-75 text-600 mb-4">Three Scrambled Eggs, Cheddar, our
Housemade Black Bean Cake, Avocado, Pico, &amp; Lime Cream</p>
</a><a class="text-decoration-none">

<div class="row">
<div class="col d-flex justify-content-between">
<h6 class="fs-0 font-weight-bold text-uppercase text-black mr-4">Fried
egg</h6>
<p class="text-danger font-weight-bold mb-0">$9.50</p>
</div>
</div>

<p class="w-xl-75 text-600 mb-4">Three

Fried Eggs, house hot sauce, local cheddar mac, lettuce, pickle &amp; onion on a sesame
roll</p>
</a></div>
<div class="col-lg-4 px-5" data-zanim-xs>

<div class="row">

15
 <div class="col d-flex justify-content-between">
<h6 class="fs-0 font-weight-bold text-uppercase text-black mr-
4">SMOKED SALMON BAGEL </h6>
<p class="text-danger font-weight-bold mb-0">$9.50</p>
</div>
</div>

<p class="w-xl-75 text-600 mb-

4">Smoked Salmon, Capers, House Pickled Red Onions, &amp; Cream Cheese served on a
Toasted Bagel</p>

<div class="row ">

<div class="col d-flex justify-content-between">
<h6 class="fs-0 font-weight-bold text-uppercase text-black mr-
4">BREAKFAST JAMMIE </h6>
<p class="text-danger font-weight-bold mb-0">$6.50</p>
</div>
</div>

<p class="w-xl-75 text-600 mb-

4">Everything Bagel with Cream Cheese, Bacon, Tomato, Red Onion, </p>

<div class="row ">

<div class="col d-flex justify-content-between">
<h6 class="fs-0 font-weight-bold text-uppercase text-black mr-
4">AVOCADO TOAST</h6>
<p class="text-danger font-weight-bold mb-0">$7.50</p>
</div>
</div>

<p class=" text-600 mb-4">Crushed

Avocado topped with MV Sea Salt on Toasted Multigrain</p>

<div class="row ">

<div class="col d-flex justify-content-between">
<h6 class="fs-0 font-weight-bold text-uppercase text-black mr-

16
4">AVOCADO TOAST</h6>
<p class="text-danger font-weight-bold mb-0">$6.50</p>
</div>
</div>

<p class="w-xl-75 text-600 mb-

4">Crushed Avocado topped with MV Sea Salt on Toasted Multigrain</p>
</div>
</div>
</div>

<div class="container-fluid bg-light p-7"><img src="bread.png"

class="img10"></div>

<div class="container-fluid bg-light">

<div class="row">
<div class="col-sm-6 flex-column-reverse ">
<center><img src="fried-clipart-transparent-background-7.png"
class="img11"></center></div>
<div class="col-sm-6 bg-warning"><h4 class="p-5 text-center text-
danger">hungry?</h4>
<p class="text-light fs-1 text-center">we will home deliver!</p>
<center><button type="button" class="btn-outline-primary"><a
href="file:///C:/Restaurant_files/order.html">Make an order</a></button></center>
</div>
</div></div>

<div class="container-sm-6 bg-light p-5 text-dark text-center">

<h4>catering</h4>
<h1 >we will manage your events</h1>
<p class="text-center">Allow our Chef to deliver the perfect private dinner or
cocktail party experience in your home; or let us simply add a little extra flavor to your next
office meeting, boat trip, or beach picnic. By partnering with our sibling location Rosewater
Wine & Spirits, we can offer a full array of bar services and beverage selections. Email us to
learn more.</p>
</div>

17
 <div class="container-fluid bg-warning">
<div class="row">
<div class="col-sm-6 bg-light "><img src="pancake_PNG94.png"
class="img15" ></div>
<div class="col-sm-6 bg-light"><p class="text-dark text-center align-text-
bottom">We Cater in Weddings,<br>
Corporate Functions<br>
and Events</p>
<center><button type="button" class="btn-warning tab-content"><a
href="file:///C:/Restaurant_files/make%20areservation.html">hire us
now</a></button></center></div>
</div></div>

<div class="container-fluid bg-warning">

<div class="row">
<div class="col-sm-3 bg-dark p-5 "><img src="pngfood2.png"
class="img90"></div>
<div class="col-sm-3 bg-dark p-5"><img src="logo.png" class="img91"><p class="text-white
fs-3">Want To TasteOur Food?</p>
<button type="button" class="btn-warning"><a
href="file:///C:/Restaurant_files/order.html">ORDER ONLINE</a></button>
</div>
<div class="col-sm-3 bg-dark"><p class="text-uppercase text-danger p-
2">about</p><p class="text-light fs-6 "><br>
<a href="file:///C:/Restaurant_files/about.html" Class="link1">about</a>
<br>
<a
href="file:///C:/Restaurant_files/contactus.html" Class="link1">services</a>

<br>Careers<br>
<a href="file:///C:/Restaurant_files/make%20areservation.html"
Class="link1">hire us</a>

</p></div>
<div class="col-sm-3 bg-dark"><p class="text-uppercase text-danger p-
2">Resources</p><p class="text-light fs-6"><br>term<br>privacy<br>

18
 <a href="file:///C:/Restaurant_files/HELP.html"
class="link1">help</a>
</p>

<a href="#" class="fa fa-facebook"></a>

<a href="facebook.com" class="fa fa-twitter"></a>
<a href="#" class="fa fa-google"></a>
<a href="https://www.instagram.com/?hl=en" class="fa fa-instagram"></a>
</div>
</div>
</div>

<div class="contain-fluid bg-primary p-5 text-white text-center">Made by joban</div>

<section class="bg-light" >

<div class="container">
<div class="row justify-content-center">
<div class="col-xxl-8">
<div class="row text-center justify-content-center">
<div class="col-md-10 col-lg-7">
<div class="overflow-hidden">
<h2 class="font-weight-bold fs-2 fs-sm-3 fs-md-4">Feel free to drop us a line!</h2>
</div>
<div class="overflow-hidden">
<P>Let's talk if you have any query or suggestion. We are open to learn from you.
So don't hesitate to reach us anytime.</p>
</div>
</div>
</div>
<form class="zform mt-4" method="post"><input type="hidden" name="to"
value="username@domain.extension">
<div class="row">
<div class="col-md">
<div class="form-group"><input class="fs-0 form-control form-control-lg"
type="text" placeholder="Your Name" required="required"></div>
<div class="form-group"><input class="fs-0 form-control form-control-lg"
type="text" placeholder="Subject" required="required"></div>
<div class="form-group"><input class="fs-0 form-control form-control-lg"

19
type="email" placeholder="Email Address" required="required"></div>
<div class="form-group">
<div class="custom-control custom-checkbox"><input class="custom-control-
input" id="sendeMeACopyCheck" type="checkbox"><label class="custom-control-label"
for="sendeMeACopyCheck">Send me a copy</label></div>
</div>
</div>
<div class="col-md">
<div class="form-group"><textarea class="fs-0 form-control contact-message
resize-none" rows="6" placeholder="Type your message here"
required="required"></textarea></div><button class="btn btn-dark" type="submit">Give us a
shot</button>
<div class="zform-feedback my-2"></div>
</div>
</div>
</form>
</div>
</div>
</div><!-- end of .container-->
</section>

</body>
</html>

20
 CHAPTER 4: SOFTWARE MODELING
The software modeling phase is a critical step in the development process, aiming to
conceptualize the system's architecture, design, and interactions. In this section, we provide an
overview of the high-level software models employed in the restaurant website project.

1. System Architecture:
The restaurant website follows a modular and component-based architecture, leveraging the
principles of React for building reusable and encapsulated components. The primary components
include:

Nav bar Component: Handles the navigation bar's presentation and functionality, ensuring a
consistent and responsive user experience. Header, Features, Offers, About, and Contact
Components: Represent distinct sections of the website, promoting code separation and
maintainability.

Feature box Component: A reusable component within the Features section for rendering
individual feature boxes.

21
 CHAPTER 5: PROJECT DESCRIPTION

5.1 Software Process Model

The software process model defines the set of activities, methods, practices, and transformations
that are used to develop and maintain software systems. The restaurant website project adhered
to an Agile Development Model to ensure flexibility, collaboration, and continuous improvement
throughout the development lifecycle.

1.1 Overview:
Agile development emphasizes iterative and incremental development, allowing for flexibility
and adaptability to changing requirements. It fosters collaboration among cross-functional teams
and promotes customer feedback at various stages, ensuring the delivered product aligns closely
with user expectations.

1.2 Key Principles:

1. Iterative Development:
- The project was divided into iterations or sprints, each focusing on specific features or
functionalities. priorities.

- Regular sprint reviews allowed for continuous feedback and adjustment of project

2. Customer Collaboration:
Stakeholder involvement and feedback were solicited throughout the development process.

- Changes in requirements could be accommodated at the beginning of each sprint.

3. Incremental Delivery:
The restaurant website was developed incrementally, with each sprint delivering a potentially
shippable product increment.

- Incremental delivery allowed for early and continuous deployment of features.

4. Cross-Functional Teams:
- The development team consisted of individuals with diverse skills, including front-end and
back-end developers, designers, and testers.

- Collaboration among team members facilitated a holistic approach to problem-solving.

22
1.3 Development Phases:

1. Requirements Gathering:
- Initial requirements were gathered through stakeholder meetings and discussions.

- User stories and acceptance criteria were defined to guide development.

2. Sprint Planning:
- Each sprint started with a planning session where the team selected user stories to implement.

- Tasks were estimated, and priorities were set for the sprint.

3. Development:
- Coding and implementation occurred during the sprint based on the selected user stories.
progress.

- Regular collaboration and communication among team members ensured smooth

4. Testing:
Testing, including unit testing and integration testing, was performed concurrently with
development.

- User acceptance testing (UAT) was conducted at the end of each sprint.

5. Review and Retrospective:

- Sprint reviews involved showcasing completed features to stakeholders for feedback.

- Retrospectives allowed the team to reflect on the sprint, identify areas for improvement, and
adjust processes accordingly.

23
 CHAPTER 6 : TESTING AND IMPLEMENTATION

6.1 Testing

1. Unit Testing:
Unit testing was conducted at the individual component level to validate that each function and
module behaved as expected. JavaScript test frameworks, such as Jest, were employed to
automate and streamline the unit testing process. This approach ensured that each component
delivered the intended functionality in isolation.

2. Integration Testing:
Integration testing focused on verifying the interactions and collaborations between different
components. By testing the combined functionality of interconnected modules, potential issues
arising from their integration were identified and addressed. This testing phase aimed to
guarantee the seamless operation of the entire system.

3. User Acceptance Testing (UAT):

User acceptance testing involved collaboration with stakeholders and end-users to evaluate the
restaurant website's functionality against predefined acceptance criteria. Feedback obtained
during UAT sessions played a crucial role in refining features, ensuring alignment with user
expectations, and addressing any usability concerns.

4. Responsiveness and Cross-Browser Testing:

Given the importance of a responsive design, extensive testing was conducted across various
devices and browsers to ensure a consistent and user-friendly experience. Cross-browser testing
was performed to guarantee compatibility with major browsers, including Chrome, Firefox,
Safari, and Edge.

6.2 Implementation

1. Agile Sprints:
The development process followed an Agile methodology, employing iterative sprints to
incrementally build and enhance the restaurant website. Each sprint encompassed a specific set
of features and functionalities, allowing for continuous integration and frequent releases.

24
2. Version Control:

Git was used for version control, allowing the development team to collaborate seamlessly. track
changes, and maintain a reliable version history. Branching strategies, such as feature branching,
were employed to manage parallel development efforts and ensure a streamlined integration
process.

3. Continuous Integration (CI):

Continuous Integration practices were implemented to automate the process of code integration
and testing. This facilitated early detection of integration issues and ensured that the latest
changes did not compromise the overall stability of the project.

4. Deployment:
The deployment process involved hosting the restaurant website on a reliable and scalable
platform. Continuous deployment practices were implemented to automate the deployment
pipeline, ensuring that updates and enhancements were delivered to the production environment
efficiently.

25
 CHAPTER 7: CONCLUSION AND REFERENCES

7.1 Conclusion
In conclusion, the restaurant website project has been a journey of exploration, learning, and
implementation. The integration of HTML, CSS, JavaScript, and Bootstarp has not only resulted
in a functional static website but has also provided valuable insights into the application of these
technologies in a real-world scenario.

Key Achievements:

1. Functional Website:
The successful implementation of the restaurant website showcases the practical application of
acquired skills. The website effectively communicates the restaurant's offerings and engages
users with its dynamic and responsive design.

2. Agile Development Success:

The adoption of Agile development practices facilitated a flexible and adaptive approach to
project management. Frequent iterations, collaboration with stakeholders, and continuous
feedback loops contributed to the project's success.

3. Testing:
Rigorous testing, spanning from unit tests to user acceptance testing, ensured the website's
reliability and responsiveness. The testing phase played a crucial role in identifying and
rectifying issues, ultimately contributing to a polished final product.

26
Some Screenshots of website:

27
28