VISVESVARAYA TECHNOLOGICAL UNIVERSITY

JNANASANGAMA, BELAGAVI – 590 018

INTERNSHIP REPORT ON “FULL

STACK WEB DEVELOPMENT”

Submitted in partial fulfillment of the requirements for the award of the degree

BACHELOR OF ENGINEERING
in
ELECTRONICS & COMMUNICATION ENGINEERING
Submitted by
NANNAT GUPTA
1MV19EC070
Internship carried out at
Varcons Technologies Pvt. Ltd.
BENGALURU, 560001

Internal Guide: External Guide:

Dr. R Sundaraguru Mrs. Spoorthi H C
Associate Professor Director
Dept of ECE, Sir MVIT Varcons Technologies
Bengaluru-562157 Bengaluru-560001

DEPARTMENT OF ELECTRONICS AND COMMUNICATION ENGINEERING SIR

M. VISVESVARAYA INSTITUTE OF TECHNOLOGY
BENGALURU-562157
2022-2023
SIR M. VISVESVARAYA INSTITUTE OF TECHNOLOGY
BENGALURU-562157
(Affiliated to Visvesvaraya Technological University, Belgaum, Karnataka)

DEPARTMENT OF ELECTRONICS AND COMMUNICATION ENGINEERING

CERTIFICATE

This is to certify NANNAT GUPTA (1MV19EC070), a bonafide student of SIR M.

Visvesvaraya Institute of Technology, Bengaluru has satisfactorily completed Industrial
training from Varcons technologies Pvt. Ltd. in partial fulfillment of the requirements as
prescribed by the VTU for the award of Bachelor of Engineering in Electronics and
Communication Engineering and submitted this report during the academic year 2022 –
2023.

Signature of the Guide Signature of HOD Signature of Principal

Dr. R Sundaraguru Dr.V.G.Supriya Prof.Rakesh S.G.

Associate Professor Professor & Head Principal

Dept of ECE Dept of ECE Sir MVIT, Bengaluru

External Viva
Name of the Examiners Signature with Date

1. ………………………………………… ………………………………………….

2. ………………………………………… …………………………………………
 CERTIFICATE FROM THE INDUSTRY

This is to certify that Nannat Gupta whose USN is 1MV19EC070, has

completed their Full Stack Web Development Internship organised and handled
by Varcons Technlogoies Pvt Ltd from 23rd August, 2022 to 27th
September, 2022.
The person to whom this certificate is addressed to has worked on a project titled
Template- A website to sell Caffeine. This project was aimed at creating fully-
fledged functional web template(s) for a client of ours. As part of the project,
they designed functional web pages, used databases to collect, store, and sort
data, by understanding the design briefs and client specifications that were
provided in the project proposal.
During the course of the internship, they demonstrated good design skills with a
self-motivated attitude to learning new things. Their performance exceeded
expectations and was able to complete the project successfully on time.

+
 DECLARATION

I, NANNAT GUPTA, student of VIII semester Bachelor of Engineering, Department of

Electronics and Communication Engineering, Sir M. Visvesvaraya Institute of Technology,
Bengaluru embodies report of my internship work carried out by me under the guidance of Dr.
R Sundaraguru, Associate Professor, Sir M. Visvesvaraya Institute of Technology,
Bengaluru as partial fulfillment of requirement for the award of Bachelor of Engineering in
Electronics & Communication by Visvesvaraya Technological University, Belagavi during
the academic year 2022-2023.

Place: Bengaluru NANNAT GUPTA

Date: 02/05/2023 1MV19EC070
 ACKNOWLEDGEMENT

The satisfaction and euphoria that accompany the completion of any task would be incomplete
without the mention of the people who made it possible, whose constant guidance and encouragement
ground my efforts with success.

I consider it is a privilege to express my gratitude and respect to all those who guided me in
completion of Internship.

It’s a great privilege to place on record my deep sense of gratitude to The Management and
Prof. Rakesh. S. G, Principal, Sir M. Visvesvaraya Institute of Technology who patronized throughout
our career and for the facilities provided to carry out this work successfully.

It’s a great privilege to place on record my deep sense of gratitude to Dr. V. G. Supriya,
Professor and Head, Dept. of Electronics and Communication Engineering, Sir M. Visvesvaraya
Institute of Technology who patronized throughout our career & for the facilities provided to carryout
this work successfully.

I am grateful to my guide Dr. R Sundaraguru, Assistant Professor, Department of ECE, Sir

M. Visvesvaraya Institute of Technology and my external guide Mrs. Spoorthi H C,Director, Varcons
Technologies for their constant support.

I thank the teaching and non-teaching staff members who have helped me directly or indirectly
during the Internship.

Finally, I also thank my family and friends for their co-operation and motivation to complete
this Internship successfully.

NANNAT GUPTA
1MV19EC070
 COMPANY PROFILE

Varcons Tech | Varcons Technologies Pvt Ltd

Varcons Technologies Pvt. Ltd. was incorporated with a goal ”To provide high quality and optimal
Technological Solutions to business requirements of our clients”. Every business is a different and has
a unique business model and so are the technological requirements. They understand this and hence the
solutions provided to these requirements are different as well. They focus on clients requirements and
provide them with tailor made technological solutions. They also understand that Reach of their Product
to its targeted market or the automation of the existing process into-client and simple process are the
key features that our clients desire from Technological Solution they are looking for and these are the
features that we focus on while designing the solutions for their clients.

Varcons Technologies is a Technology Organization providing solutions for all web design and
development, MYSQL, PYTHON Programming, HTML, CSS, ASP.NET and LINQ.

Varcons Technology Pvt. Ltd. strives to be the front runner in creativity and innovation in software
development through their well-researched expertise and establish it as an out of the box software
development company in Bangalore, India. As a software development company, they translate this
software development expertise into value for their customers through their professional solutions.

They understand that the best desired output can be achieved only by understanding the clients demand
better. Varcons Technology Ptv Ltd. works with their clients and help them to define their exact solution
requirement. Sometimes even they wonder that they have completely redefined their solution or new
application requirement during the brainstorming session, and here they position themselves as an IT
solutions consulting group comprising of high caliber consultants.

They believe that Technology when used properly can help any business to scale and achieve new
heights of success. It helps improve its efficiency, profitability, and reliability; to put it in one
sentence “Technology helps you to delight your Customers”
 TABLE OF CONTENTS

1. Introduction 1
2. Narration 5
3. Self Evaluation 18
4. References 19
 LIST OF FIGURES

Figure 1. Header section: 13

Figure 2. Home page slide 1 13
Figure 3. Home page slide 2 13
Figure 4. Home page slide 3 14
Figure 5. Search option 14
Figure 6. Searching for Black Tea using search bar 14
Figure 7. Tea Section Row 1 15
Figure 8. Tea Section Row 2 15
Figure 9. About Section 15
Figure 10. Menu Section Row 1
16
Figure 11. Menu Section Row 2 16
Figure 12. Menu Section Row 3 16
Figure 13. Review Section 17
Figure 14. Order Section 17
Figure 15. Footer Section 17
 CHAPTER 1
INTRODUCTION

About the Company

Varcons Technologies Pvt. Ltd. is a Technology Organization providing solutions for all web design
and development, MYSQL, PYTHON Programming, HTML, CSS, ASP.NET and LINQ. Meeting the
ever increasing automation requirements, Varcons Technology Pvt. Ltd. Specialize in ERP,
Connectivity, SEO Services, and Conference Management, effective web promotion and tailor-made
software products, designing solutions best suiting client’s requirements. The organization where they
have a right mix of professionals as a stake holders to help and serve our clients with best of our
capability and with at par industry standards. They have young, enthusiastic, passionate and creative
Professionals to develop technological innovations in the field of Mobile technologies, Web
applications as well as Business and Enterprise solution. Motto of the organization is to “Collaborate
with our clients to provide them with best Technological solution hence creating Good Present and
Better Future for client which will bring a cascading a positive effect in their business shape as well”.
Providing a Complete suite of technical solutions is not just our tag line, it is Our Vision for Clients.

Vision
With the Right Software, Service and Analytics, great things can happen.

Mission

“To empower businesses to achieve their full potential through creative and strategic web design and
development solutions that enhance their online presence, improve user experience and drive
measurable results”

Objective

Main goal is to find smart ways of using technology that will help build a better tomorrow for
everyone, everywhere and to offers a variety of advantages over traditional software licensing
models and here at VCT tend to include the key features of SaaS in everything to build.

DEPARTMENT OF ECE, SIR MVIT 1

Products provided by Varcons Technologies Pvt. Ltd.

Android Apps

It is the process by which new applications are created for devices running the Android operating
system. Applications are usually developed in Java (and/or Kotlin or other such option) programming
language using the Android software development kit (SDK), but other development environments are
also available, some such as Kotlin support the exact same AndroidAPIs (and byte code), while others
such as Go have restricted API access.

The Android software development kit includes a comprehensive set of development tools. These
include a debugger, libraries, a handset emulator based on QEMU, documentation, sample code, and
tutorials. Currently supported development platforms include computers running Linux (any modern
desktop Linux distribution), Mac OS X 10.5.8 or later, and Windows 7 or later. As ofMarch 2015,
the SDK is not available on Android itself, but software development is possible by using specialized
Android applications.

Web Application

It is a client–server computer program in which the client (including the user interface and client- side
logic) runs in a web browser. Common web applications include webmail, online retail sales, online
auctions, wikis, instant messaging services and many other functions. Web applications use web
documents written in a standard format such as HTML and JavaScript, which are supported bya variety
of web browsers. Web applications can be considered as a specific variant of client–server software
where the clients of two are is downloaded to the client machine when visiting the relevant webpage,
using standard procedures such as HTTP. The Client web software updates may happen eachtime the
web page is visited.
During the session, the web browser interprets and displays the pages, and acts as the universal client
for any web application. The use of web application frameworks can often reduce the number of errors
in a program, both by making the code simpler, and by allowing one team to concentrate on the
framework while another focuses on a specified use case. In applications whichare exposed to constant
hacking attempts on the Internet, security-related problems can because by errors in the program.

Frameworks can also promote the use of best practices such as GET after POST. There are some who
view a web application as two-tier architecture. This can be a “smart” client that performs all the
work and queries a “dumb” server, oar “dumb” client that relies on a “smart” server. The client would
handle the presentation tier, the server would have the database (storage tier) and the business logic
(application tier) would be on one of the moron both. While this increases thestability of the applications
and separates the display and the database, it still does n’t allow for true specialization of layers, so
most applications will out growth is model. An emerging strategy for

DEPARTMENT OF ECE, SIR MVIT 2

 application software companies is to provide web access to software previously distributed local
applications. Depending on the type of application, it may require the development o fan entirely
different browser-based interface, or merely adapting an existing application to use different
presentation technology..

Security breaches on these kinds of applications are a major concern because it cans involve both
enterprise information and private customer data. Protecting these assets is an important part of any
web application and there are some key operational areas that must be included in the development
process. This includes processes for authentication, authorization, as set handling, input, and logging
and auditing. Building security into the applications from the beginning can be more effective endless
disruptive in the long run.

Web design

It is encompasses many different skills and disciplines in the production and maintenance of websites.
The different areas of web design include web graphic design; interface design; authoring, including
standardized code and proprietary software; user experience design and search engine optimization.
The term web design is normally used to describe the design process relatingto the front-end (client
side) design of a website including writing mark up. Web design partially overlaps web engineering in
the broader scope of web development. Web designers are expected to have an awareness of usability
and if their role involves creating mark up then they are also expected to be up to date with web
accessibility guidelines. Web design partially overlaps web engineering in the broader scope of web
development

Departments and services offered

Varcons Technology Pvt. Ltd. plays an essential role as an institute, the level of education, development
of student’s skills is based on their trainers. If you do not have a good mentor then you may lagan many
things from others and that is why we at Varcons Technology Pvt. Ltd. gives you the facility of skilled
employees so that you do not feel unsecured about the academics. Personality development and
academic status are some of those things which lie on mentor’s hands. If you are trained well then you
can do well in your future and knowing its importance of Varcons Technology Pvt. Ltd. Always tries
to give you the best.

They have a great team of skilled mentors who are always ready to direct their trainees in the best
possible way they can and to ensure the skills of mentors we held many skill development programsas
well so that each and every mentor can develop their own skills with the demands of the companies so
that they can prepare a complete packaged trainee.

Services provided by Varcons Technologies Pvt. Ltd.

• Core Java and Advanced Java

• Web services and development

DEPARTMENT OF ECE, SIR MVIT 3

• Dot Net Framework

• Python

• Selenium Testing

• Conference /Event Management Service

• Academic Project Guidance

• On the Job Training

DEPARTMENT OF ECE, SIR MVIT 4

 CHAPTER 2
NARRATION

Chronological order of events:-

1. Understanding the basic structure of HTML:

HTML is used to create web pages and other types of digital content that can be displayed on the
internet. HTML uses tags and attributes to structure and describe the content of a web page, such as
headings, paragraphs, images, links, tables, and forms. By using HTML, web developers can create
rich, interactive, and accessible web pages that can be easily displayed on a variety of devices and web
browsers.
HTML is one of the core technologies used for building websites, along with CSS and JavaScript.
Together, these technologies enable web developers to create engaging and dynamic web experiences
for users.
Understanding of essential tools required to write an HTML script such as tags, forms, inputs, radio
buttons, tables, lists etc. was done.

2. Introduction to CSS:
CSS stands for Cascading Style Sheets, and it is a style sheet language used to describe the presentation
of HTML documents, including the layout, colors, fonts, and other visual elements ofa web page.
CSS allows web developers to separate the content of a web page from its presentation, makingit easier
to manage and update the look and feel of a website. By using CSS, web developers can define styles
that apply to specific elements or groups of elements on a web page, such as headings, paragraphs, lists,
tables, and forms.
CSS uses a set of rules and selectors to specify how different elements of a web page shouldbe styled.
For example, you could use CSS to set the font size, color, and background of all the headings on a
web page, or to create a responsive layout that adjusts to different screen sizesand devices.
CSS is an essential part of modern web development, and it is often used in conjunction with HTML
and JavaScript to create dynamic and interactive web experiences.
Teaching of the various webpage formatting techniques was done.

3. Introduction to JavaScript:
JavaScript is a programming language used primarily to create interactive web pages and other dynamic
content on the web. It is a client-side scripting language, which means that it runs on the user's web
browser rather than on the web server. JavaScript allows web developers to add interactivity,
animations, and other dynamic elements to web pages, as well as to create web applications that can
perform complex task send interact with data and services on the web.
JavaScript code is typically embedded directly into HTML pages, or it can be loaded from external
JavaScript files. It is a versatile language that can be used for a wide range of applications, from simple
form validation to full-fledged web applications and games.
The importance of JavaScript in the context of web development was thoroughly explained.

DEPARTMENT OF ECE, SIR MVIT 5

Linking JavaScript code to a webpage was explained and demonstrated. The basic syntax thatis required
to program in any programming language such as initializing and declaring variables, writing comment
statements was taught. In order to write the logic for the operation of a webpage, it is essential to learn
how to write functions, perform looping operations and write conditional statements which wereall well
explained.

4. Understanding the basics of OOPS concepts and constructors in JS:

Object-Oriented Programming (OOP) is a programming paradigm that uses objects to represent and
manipulatedata and behavior. Importance of understanding OOPs concepts like inheritance,
encapsulation, and polymorphism was established as they can help developers create more modular and
maintainable code, as well as to work with third-party libraries and frameworks that use OOP principles.
Constructors are functions that are used to create new instances of objects.

5. Introduction to Django:
Django is a web framework for building web applications in Python. It's like a set of tools and libraries
that help you create web applications more easily and efficiently. With Django, to build a web
application, instead of starting from scratch, Django's built-in features and libraries can beused
to save time and effort. Django includes features for things like database access, URL routing,
authentication, and template rendering, all of which are essential components of web applications. It
also has a powerful and flexible ORM (Object-Relational Mapping) system that makes it easy to work
with databases, as well as a built-in admin interface for managing the content of your application.
Overall, Django is popular and powerful web frameworks that can help developers build complex and
scalable web applications quickly and easily, while also providing a solid foundation for secure
andmaintainable code.

6. Linking HTML:
Linking HTML pages is an important aspect of creating a website. It allows users to navigate between
different pages and sections of a website. This is achieved using the anchor tag. When a user clicks
on a hyperlink, the browser sends a request to the web server for the linked page, and the server sends
back the HTML code for that page, which is then rendered by the browser.
To pass data between web pages, web developers can use two HTTP methods: GET and POST. The
GET method is used to retrieve data from a web server, and the data is passed through theURL of
the linked page. When a user clicks on a hyperlink with a query string, the browser sends a GET request
to the server, and the server sends back the requested data.
Linking HTML pages using hyperlinks allows users to navigate between pages, and passing data
between web pages can be done using the GET and POST methods. This enables web developers to
create dynamic and interactive websites that can respond to user input and provide personalized content.

7. Introduction to SQL:
SQL (Structured Query Language) is a programming language used for managing and manipulating
relational databases. It is used for tasks such as querying and updating data, creating and modifying
database structures, and controlling access to the database.
In MySQL, they taught us how to use SQL to create and manage databases, tables, and indexes.

DEPARTMENT OF ECE, SIR MVIT 6

We learned how to write SQL queries to retrieve, filter, and sort data, as well as how to use SQL
functions to aggregate and transform data. Additionally, we learned how to use SQL statements.

Post training project:-

Requirement Analysis:

Hardware Requirement Specification

• HTML5
• CSS
• JavaScript
• Visual studio
• Processor: Intel core i3 processer
• Memory: 15.6 GB
• Hard Disk: 40 GB

Software Requirement Specification

[A] Functional Requirements

A Software Functional Requirement Specification (SFRS) is a document that outlines the functional
requirements that a software system must meet to satisfy the needs of its users. In thecase of an online
tea selling website, the SFRS would describe the functionality required to providea seamless and
efficient user experience for customers who visit the website to buy tea.

Here are some functional requirements that could be included in an SFRS for an online tea selling
website:

1. User Registration: The website should allow users to register for an account and create a profile.
This profile should store their personal information such as name, address, and payment details.

2. Product Catalog: The website should display the available tea products along with their details such
as price, ingredients, and availability. The website should allow customers to browse, search and filter
products by different criteria such as tea type, flavor, or price range.

3. Shopping Cart: The website should allow users to add tea products to a virtual shopping cart and
update the cart as they browse. Customers should be able to view their cart and modify the contents
before proceeding to checkout.

4. Checkout Process: The website should provide a secure checkout process that allows customers
to enter their payment information and complete their purchase. The checkout process should include
features such as order confirmation, delivery options, and estimated delivery times.

5. Order Management: The website should allow customers to track their orders and receive updates
on their order status. The website should also allow administrators to manage and fulfill orders,
including the ability to mark orders as shipped, cancel orders, or issue refunds.

DEPARTMENT OF ECE, SIR MVIT 7

6. Customer Service: The website should provide customer service features such as a contact form,
an FAQ section, and live chat support to help customers with any questions or issues they may
encounter while using the website.

7. Marketing and Promotions: The website should allow administrators to create and manage
marketing campaigns and promotions such as discounts, coupon codes, and loyalty programs to
incentivize customer purchases and increase sales.

[B] Non- Functional Requirements

Software Non-Functional Requirements Specification (SNFRS) are the requirements that are not related
to the specific features or functionality of the software system but rather specify the quality attributes
or constraints that the system must meet. In the case of an online tea selling website, SNFRSwould
describe the non-functional requirements necessary for the system to provide a high-quality user
experience that meets the expectations of its users. Here are some non-functional requirements that
could be included in an SNFRS for an online tea selling website:

1. Performance: The website must be able to handle a large number of concurrent users and
transactions without significant delays or slowdowns. The website should load quickly and respond
promptly to user actions such as adding products to a cart or completing a purchase.

2. Security: The website must be secure and protect user data such as personal and payment
information. The website should use encryption, secure authentication methods, and other security
measures to prevent unauthorized access or data breaches.

3. Usability: The website must be easy to use and navigate, with intuitive interfaces and clear
instructions. The website should be accessible to users with disabilities and conform to web
accessibility standards such as WCAG 2.1.

4. Reliability: The website must be reliable and available for use at all times, with minimal downtime
or disruptions. The website should have a robust backup and recovery system in place to ensure that
user data is not lost in case of an unexpected system failure.

5. Scalability: The website must be scalable and able to handle growth in user traffic and transaction
volume. The website should be designed to accommodate future expansion and updates without
significant changes to the underlying architecture.

6. Compatibility: The website must be compatible with different browsers, operating systems, and
devices to ensure that users can access the website from a wide range of platforms.

7. Performance under Load: The website should be able to handle a heavy load of users andtransactions
without significant degradation in performance or functionality.

These are some of the non-functional requirements that could be included in an SNFRS for an
online tea selling website. The specific requirements may vary depending on the scope of the
project and the needs of the target audience.

DEPARTMENT OF ECE, SIR MVIT 8

 About the project
Introduction
An online tea selling website is a website that is dedicated to the sale of tea products through an online
platform. These websites typically offer a wide range of tea products such as loose leaf teas,tea bags, tea
accessories, and gift sets. The online tea selling websites may specialize in a particulartype of tea, such
as herbal teas, green teas, or black teas, or offer a broad range of tea products from different regionsof the
world.

The online tea selling websites provide a convenient and easy way for customers to purchase tea products
without having to visit a physical store. Customers can browse through the different tea products, read
their descriptions, view their prices, and add them to their shopping carts. Once the customers have
selected the products they wish to purchase, they can proceed to the checkout process, where they enter
their payment and shipping information to complete the purchase.

Online tea selling websites may also offer additional features such as tea blogs, tea recipes, and tea
education to provide customers with more information about tea and how to prepare and enjoy it. These
websites may also offer discounts, loyalty programs, and other incentives to encourage customer loyalty
and repeat business.

Overall, online tea selling websites provide a convenient and accessible way for tea lovers to purchase
their favorite teas from the comfort of their homes, making it a popular choice for tea enthusiasts around
the world.

Problem Statement

The traditional online tea selling website is facing several issues that are negatively affecting the customer
experience and business revenue.
• Limited Product Information: The website has limited information about the different types of
teas available, their origin, and their taste profile. This makes it difficult for customers to make
informed decisions while purchasing tea.
• Lack of Personalization: The website does not provide personalized recommendations to
customers based on their taste preferences, purchase history, and location. This results in
customers not finding teas that suit their taste and preferences.
• Inefficient Order Management: The website has a slow and inefficient order management system
that causes delays in processing orders and delivering them to customers. This resultsin a poor
customer experience and a loss of potential revenue.
• Poor User Interface: The website has a cluttered and confusing user interface that makes it
difficult for customers to navigate and find the products they are looking for. This results in a
high bounce rate and a loss of potential revenue.
Overall, these issues are negatively impacting the customer experience and business revenue of the
traditional online tea selling website.
DEPARTMENT OF ECE, SIR MVIT 9
 System Analysis:

It is a process of collecting and interpreting facts, identifying the problems, and decomposition of a
system into its components.
System analysis is conducted for the purpose of studying a system or its parts in order to identify its
objectives. It is a problem solving technique that improves the system and ensures that all the components
of the system work efficiently to accomplish their purpose.
Analysis specifies what the system should do.
• User Requirements: Identify the user requirements by conducting market research, surveys, and
focus groups to determine the types of teas that customers prefer, their price range, and the
features they expect from an online tea selling website.
• Functional Requirements: Identify the functional requirements by determining the features and
functionality of the website, such as product listing, search, sorting, payment processing,
customer support, and order management.
• Technical Requirements: Identify the technical requirements by determining the technology stack
and infrastructure needed to build and deploy the website. This includes programming languages,
databases, hosting, security protocols, and content delivery networks.
• User Interface Design: Develop an intuitive and user-friendly interface that makes it easy for
customers to navigate and find the teas they are looking for. Use responsive design to ensure that
the website is accessible on different devices, such as desktops, laptops, tablets, andmobile
phones.
• Product Catalogue: Develop a comprehensive product catalogue that includes different types
of teas, their origin, taste profile, price, and availability. Provide high-quality images and detailed
descriptions to help customers make informed decisions.
• Personalization Features: Implement personalization features, such as recommended products
based on customer preferences, purchase history, and location. Allow customers to create their
profiles, save their favorite teas, and receive alerts about new arrivals and promotions.
• Requirements Gathering: The first step in developing an online tea selling website is to gather
requirements from stakeholders. This includes understanding the target audience, the types of
teas that will be sold, the payment options available, and the features that are required tomake the
website user-friendly and efficient.
• System Design: The next step is to design the system architecture and user interface. This includes
deciding on the platform and tools to be used, the layout of the website, and the features that will
be included.
• Development: The website is developed based on the system design, using programming
languages such as HTML, CSS, and JavaScript. This includes creating the website's frontend and
backend, integrating payment gateways, and ensuring the website's security.
• Testing: The website is thoroughly tested to ensure that it meets the requirements and is user-
friendly. This includes testing for usability, functionality, and security.
• Deployment: Once the website has been tested and approved, it is deployed on a server and made
live. This includes configuring the website's domain name and hosting, and ensuring that the
website is accessible to users.

DEPARTMENT OF ECE, SIR MVIT 10

 • Maintenance: The website requires ongoing maintenance to ensure that it is up-to-date and secure.
This includes updating the website's content, fixing bugs and errors, and implementing new
features based on user feedback.

Work done by me:

I was the one who took the responsibility for making the front-end of the project (online tea selling
website).
The following are some tasks that I kept in mind while making an online tea selling website:

1. User Interface Design: Aim is to create a visually appealing and user-friendly website interface.
2. HTML, CSS, and JavaScript Development: The front-end developer will use HTML, CSS,
and JavaScript to create the website's front-end code. This includes creating responsive layouts,
styling the website, and adding interactivity and animations.
3. Responsive Design: The front-end developer will ensure that the website is designed to be
responsive and accessible on different screen sizes and devices. This includes implementing
responsive design principles like fluid layouts, flexible images, and media queries.
4. Web Performance Optimization: The front-end developer will optimize the website'sperformance
by reducing load times, minimizing HTTP requests, and optimizing images and other media. This
includes using techniques like lazy loading, image compression, and magnification.
5. Cross-Browser Compatibility: The front-end developer will ensure that the website is compatible
with different browsers and operating systems. This includes testing the websiteon different
browsers and fixing any compatibility issues that arise.
6. Integration with Back-End: Gave the overall view about the design of the website to the other
group members who are looking after the back-end work.
7. Testing and Debugging: Successfully tested the website thoroughly to ensure that it works as
intended and is free of bugs and errors.

The front-end developer plays a critical role in the development of an online tea selling website by
creating a user-friendly and visually appealing interface and ensuring that the website is optimized for
performance, accessibility, and cross-browser compatibility.

Proposed System:

The following system has been proposed while making an online tea selling website:
• Product Information System: The website should have a comprehensive product information
system that provides detailed information about the different types of teas available. This should
include the origin, taste profile, brewing instructions, and ingredients used in each tea. Customers
should be able to filter and sort teas based on their preferences and view reviews

DEPARTMENT OF ECE, SIR MVIT 11

 and ratings from other customers.
• Personalization System: The website should have a personalization system that recommends teas
to customers based on their taste preferences and location.

• Order Management System: The website should have an efficient order management system that
allows customers to place orders easily and quickly. This includes a shopping cart system that
allows customers to add and remove items, a checkout system that supports multiple payment
options, and a shipping system that provides accurate delivery estimates and tracking information.
• Customer Relationship Management System: The website should have a customer relationship
management system that allows customers to provide feedback and reviews, track their order
history, and receive personalized recommendations. This can be achieved using a customer portal
that allows customers to manage their account and interact with the website.
By implementing these systems, the online tea selling website can provide a personalized, efficient, and
user-friendly experience for customers, while also improving business revenue and performance.

Implementation steps:
As a front-end developer, implementing an online tea selling website involves several steps, which
include:
• The first step in implementing an online tea selling website is designing the user interface. This
involves creating wireframes and mockups to plan the layout and functionality of the website.
• The next step is to create the HTML markup that defines the structure of the website. This
includes creating the header, footer, navigation bar, and other sections of the website.
• Once the HTML markup is in place, the front-end developer can use CSS to style the website.
This includes choosing fonts, colors, and layouts, and creating visual effects like hover states and
animations.
• The front-end developer can add interactivity to the website using JavaScript. This includes
creating forms for users to submit orders, adding product filtering and sorting functionality, and
implementing other user-facing features.
• Once the website is built, the front-end developer should test the website thoroughly to ensure
that it works as intended. This includes testing the website on different devices and browsers,
checking for accessibility, and fixing any issues that arise.
• Finally, the front-end developer can optimize the website for performance. This includes
minimizing the size of images and other media, reducing the number of HTTP requests, and using
techniques like lazy loading to improve load times.
Overall, implementing an online tea selling website it requires a strong understanding of HTML,
CSS, and JavaScript, as well as a focus and patience.

DEPARTMENT OF ECE, SIR MVIT 12

 Snapshots of the website:

Figure 1. Header section

Figure 2. About

DEPARTMENT OF ECE, SIR MVIT 13

 Figure 3. Menu

Figure 4: Products

DEPARTMENT OF ECE, SIR MVIT 14

 Figure 5: Review

Figure 6: Contact

DEPARTMENT OF ECE, SIR MVIT 15

 Figure 7: Blogs

Figure 8: Cart System

DEPARTMENT OF ECE, SIR MVIT 16

 CHAPTER 3
SELF EVALUATION

During my internship time at Varcons Technologies, I experienced and learned about many different
languages like HTML, CSS and JavaScript where I can excel even more. I chose to go with web
designing as a front-end developer. As a part of the internship, I learned about different types of
properties and tags of HTML and CSS while training and writing the codes to make website more
attractive and user friendly. It has also been extremely helpful to learn how we can make website and
things we have to keep on mind while making the website.

Being a part of this program has been an incredible experience for me, where I was able to learn from
scratch how the website work and explore all the different fields and technologies. I found the sessions
throughout the internship to be very interactive and informative.

I feel that I have made significant progress in my understanding of web development and design
concepts, thanks to the comprehensive curriculum provided in this program. I appreciate the
introduction to HTML and JavaScript, which has allowed me to create engaging and dynamic web
pages. I am now on the path towards becoming a better web developer, analyzer, and problem solver.
I will take all these lessons with me on my professional journey and hope to improve with every
passing day.

One area that I would like to improve upon is my understanding of JavaScript because it’s a very vast
language where it requires a lot of time to understand more.

In terms of the teaching staff, I appreciate their dedication to helping students learn and their willingness
to provide feedback and support. The instructions given were clear and structured.

Overall, I am grateful for the opportunity to learn and grow in this program, and I believe that with
continued practice and learning, I can become a skilled web developer and designer.

To be a valued employee in this industry, we must be aware of all the qualities we need, be it technical
or interpersonal. As a result of this program, we were able to develop all those qualities and demonstrate
professionalism.

DEPARTMENT OF ECE, SIR MVIT 17

 REFRENCES

1. https://www.varconstech.com/
2. https://www.w3schools.com/
3. https://css-tricks.com/
4. https://developers.google.com/web
5. https://codepen.io/
6. https://getbootstrap.com/
7. https://fontawesome.com/icons
8. https://unsplash.com/
9. https://www.pexels.com/
10. https://pixabay.com/
11. https://www.youtube.com/watch?v=l1EssrLxt7E&list=PLfqMhTWNBTe3H6c9OGXb5_6wcc1Mca52n

DEPARTMENT OF ECE, SIR MVIT 18