INTERNSHIP REPORT ON

“WEB-DEVELOPMENT,
TRIOS TECHNOLOGIES [Link] , CHENNAI”
SUBMITTED BY
ABISREE M [622123202006]
[Link] INFORMATION TECHNOLOGY
PAAVAI ENGINEERING COLLEGE
NAMAKKAL – 607318

UNDER THE GUIDANCE OF

 BONAFIDE CERTIFICATE

Certified that this internship report “WEB-DEVELOPMENT” is the work of “ABISREE M

(622123202006)” Who carried out the internship under supervision.

SIGNATURE SIGNATURE

Dr. B. VENKATESAN, M.E., Ph.D., K. SELSIYA, [Link]., M.E.,

HEAD OF THE DEPARTMENT SUPERVISOR

Associate Professor, Professor,

Department of Information Technology, Department of Information Technology,

Paavai Engineering College, Paavai Engineering College,

Namakkal - 637 018. Namakkal - 637 018.

1.

2.

3.

INTERNAL EXAMINER
 DECLARATION

I hereby declare that the internship training entitled “WEB – DEVELOPMENT” submitted to the
department of INFORMATION TECHNOLOGY in PAAVAI ENGINEERING COLLEGE,
NAMAKKAL for the industrial internship in the degree of BACHELOR OF TECHNOLOGY is
a record of original work done by me under the guidance of

PLACE: Namakkal SIGNATURE OF STUDENT

DATE :
 DAY 1 [25/06/2025]

Topic: Introduction and Orientation to Web Development

Objective:
To understand the company structure, web development workflow, and set up the technical
environment.

Technical Description:
The first day of my internship at Trios Technologies Pvt. Ltd. began with an orientation session
conducted by the HR and technical teams. They introduced the company’s mission, departments,
and work culture. The Technical Head explained the overall process of software development and
the importance of teamwork, deadlines, and communication.

We were introduced to web development, focusing on its three main layers:

1. Front-End: Designing interfaces using HTML, CSS, and JavaScript.

2. Back-End: Server-side logic using Python and Flask.

3. Database Management: Handling data with SQL.

The mentor explained client-server architecture and the role of APIs in connecting frontend and
backend systems.

We then performed environment setup, installing tools like VS Code, Python, Flask, Git/GitHub,
and browser developer tools. A “Hello World” webpage was created to understand basic HTML
structure and file linking.

Later, we interacted with the web development team, who shared their experiences on project
collaboration, version control, and maintaining code quality. The internship plan, including daily
learning and weekly tasks, was also explained.

Outcome:

• Understood the basics of web development workflow.

• Learned frontend, backend, and database roles.

• Set up the development environment and essential tools.

• Gained awareness of GitHub version control.

• Understood teamwork, communication, and project organization in a corporate setup.

 DAY 2 [26/06/2025]

Topic: HTML5 and CSS3

Objective:
To learn the structure and styling of web pages using HTML5 and CSS3.

Technical Description:
On the second day, I learned about HTML5 and CSS3, the core technologies for front-end web
development. The trainer explained the basic HTML structure and common tags such as headings,
paragraphs, links, images, tables, and forms. We practiced creating a simple webpage layout that
included a header, image, and contact form.

In the second session, CSS3 was introduced for styling and enhancing webpage design. I learned
different ways to apply CSS — inline, internal, and external styles — and how to use selectors,
colors, borders, spacing, and fonts to improve presentation.

As a practical exercise, I designed a personal portfolio page using HTML and CSS, experimenting
with layout, alignment, and color combinations.

Tools Used:
HTML5, CSS3, VS Code, Google Chrome

Outcome:

• Understood HTML structure and common tags.

• Learned CSS styling and its types.

• Created and styled a basic webpage layout.

• Gained hands-on experience in front-end design

 DAY 3 [27/06/2025]

Topic: Introduction to JavaScript and DOM Manipulation

Objective:
To learn the fundamentals of JavaScript, its syntax, control structures, and how to manipulate
webpage elements dynamically using the Document Object Model (DOM).

Technical Description:
The session introduced JavaScript, a scripting language used to make web pages interactive. I
learned three ways to include JavaScript:

1. Inline Script – inside HTML tags.

2. Internal Script – within <script> tags.

3. External Script – linked using <script src="[Link]"></script>.

Basic syntax and data types such as string, number, boolean, array, and object were covered. The
trainer explained variable declarations using var, let, and const, along with operators and control
structures like if-else, for, and while loops.

Example:

function greet(name) {
return "Welcome, " + name + "!";
}

We also explored DOM manipulation — accessing and modifying HTML content dynamically
using:

• [Link]()

• [Link]()

Example:

[Link]("demo").innerHTML = "Updated Content!";

In the hands-on task, I created a webpage where clicking a button displayed messages or changed
background colors, learning real-time interaction through event handling.
Tools Used:
HTML5, CSS3, JavaScript, VS Code, Google Chrome

Outcome:

• Learned JavaScript basics and control structures.

• Gained hands-on experience with DOM manipulation.

• Built a small interactive webpage demonstrating dynamic content changes.

 DAY 4 [28/06/2025]

Topic: Advanced JavaScript Functions, Events, and Form Validation

Objective:
To understand advanced JavaScript concepts such as functions, event handling, and form validation
for building interactive and user-friendly web pages.

Technical Description:
The session focused on advanced JavaScript features that enhance webpage interactivity. The
trainer explained different types of functions — regular, function expressions, and arrow functions
(ES6).

Example:

const sum = (a, b) => a + b;

Functions help improve code reusability and maintainability.

Next, we learned about event handling, which allows web pages to respond to user actions like
clicks or keypresses using event listeners.

Example:

[Link]("btn").addEventListener("click", () => {
alert("Button clicked!");
});

The most important part was form validation, ensuring correct user input before submission. I
created a simple registration form that checked empty fields and verified email format using
JavaScript.

Example:

function validateForm() {
let email = [Link]("email").value;
if (![Link]("@")) {
alert("Invalid email!");
return false;
}
}

Through this, I learned how JavaScript interacts with the DOM for real-time feedback and data
validation.
Tools Used:
HTML5, CSS3, JavaScript, VS Code, Google Chrome

Outcome:

• Learned different types of JavaScript functions.

• Understood event handling and DOM interaction.

• Implemented form validation for data accuracy.

• Built a simple registration form with validation logic.

 DAY 5 [30/06/2025]
Topic: Introduction to Bootstrap Framework and Responsive Design

Objective:
To learn the Bootstrap framework and design responsive, mobile-friendly web pages using pre-built
CSS and JavaScript components.

Technical Description:
The fifth day focused on Bootstrap, a powerful front-end framework used to build responsive and
modern websites efficiently. The trainer explained that Bootstrap works with HTML, CSS, and
JavaScript, providing a 12-column grid system and reusable UI components.

We linked Bootstrap via CDN and learned layout customization using grid classes like col-sm-,
col-md-, and col-lg- for different screen sizes.

Example:

<div class="container">
<div class="row">
<div class="col-md-6">Left</div>
<div class="col-md-6">Right</div>
</div>
</div>

The trainer demonstrated key Bootstrap components — buttons, navbars, cards, modals, and
alerts. I practiced creating a responsive webpage that included a navigation bar, carousel, and card-
based layout.

Example (Navbar):

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">MySite</nav>

Utility classes like m-3, p-2, and text-center were used for spacing and alignment. The
session emphasized the importance of responsive design, ensuring webpages adapt smoothly to all
devices.
Tools Used:
HTML5, CSS3, Bootstrap, VS Code, Web Browser

Outcome:

• Understood Bootstrap structure and grid system.

• Learned responsive design and breakpoints.

• Built a webpage using Bootstrap components.

• Improved skills in creating mobile-friendly layouts.

 DAY 6 [01/07/2025]

Topic: Bootstrap Forms, Navigation, and Component Customization

Objective:
To design and customize user forms and navigation bars using Bootstrap components and classes,
improving both aesthetics and functionality of web pages.

Technical Description:
On the sixth day, I continued exploring Bootstrap in greater depth, focusing on form design,
navigation bars, and component customization.

We began with form creation using Bootstrap’s built-in form controls and layout utilities. I learned
to design login, signup, and feedback forms using input fields, radio buttons, checkboxes, and
dropdowns.

Example:

<form class="p-3">
<div class="form-group">
Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
Login</button>
</form>

Next, we designed navigation bars using Bootstrap’s navbar class. The trainer explained how to
make the navbar responsive using the .navbar-expand-lg and .collapse classes. I also learned how to
add dropdown menus and icons for better navigation.

Example:

<nav class="navbar navbar-expand-lg navbar-light bg-light">

Portfolio</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-
target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
Home</a></li>
Projects</a></li>
</ul>
</div>
</nav>

Later, we customized Bootstrap components using custom CSS and utility classes. For example,
changing button colors, adding shadows, and adjusting margins for better spacing. The trainer also
demonstrated how to include icons using Bootstrap Icons and modal popups for interactive
content.

By the end of the session, I built a fully functional webpage layout with a responsive navigation
bar, styled form, and footer. The design looked clean and professional across different devices.

Outcome:

• Designed responsive forms using Bootstrap classes.

• Created functional navigation menus and dropdowns.

• Learned to customize Bootstrap components using CSS.

• Improved understanding of UI/UX design principles.

• Developed a complete webpage layout integrating forms and navbar.

 DAY 7 [02/07/2025]
Topic: Introduction to Git and Version Control

Objective:
To understand Git fundamentals and learn how to manage and collaborate on code using GitHub.

Technical Description:
The seventh day focused on Git, a version control system used to track code changes and enable
collaboration. The trainer explained that Git allows developers to record file versions, revert to
older states, and work in teams efficiently.

We installed Git and configured it using:

git config --global [Link] "KL"

git config --global [Link] "kl@[Link]"

Then, we practiced key Git commands:

• git init – Initialize a repository

• git add – Stage files

• git commit -m "message" – Save changes

• git status – Check modified files

• git log – View commit history

Example workflow:

git init
git add [Link]
git commit -m "Added homepage layout"

Next, we linked Git with GitHub using git remote add origin <URL> and git push
-u origin main to upload files. The trainer explained branching for experimenting without
disturbing the main project:

git branch feature

git checkout feature
git merge main

We also explored GitHub Desktop and learned about pull requests and issue tracking for
collaboration.
Tools Used:
Git, GitHub, Command Prompt, VS Code

Outcome:

• Learned Git basics and commands.

• Understood version control importance.

• Created and managed repositories.

• Uploaded a local project to GitHub.

• Gained collaboration experience using branches and merges.

 DAY 8 [03/07/2025]
Topic: Introduction to Python Programming Basics and Syntax

Objective:
To learn the core concepts of Python, including syntax, variables, data types, and control structures.

Technical Description:
On the eighth day, I started learning Python, a simple and versatile programming language widely
used in web development and automation. The trainer explained Python’s features—readability,
portability, and large library support.

We installed Python and practiced using IDLE and VS Code. I learned about:

• Variables and data types (int, float, string, list, dict)

• Arithmetic and logical operators

• Conditional statements (if, elif, else)

• Loops (for, while) and indentation rules

Example:

marks = int(input("Enter marks: "))

if marks >= 90:
print("Grade A")
elif marks >= 75:
print("Grade B")
else:
print("Grade C")

Through hands-on tasks, I practiced writing small programs for calculations and decision-making,
improving my logical thinking and problem-solving skills.
Outcome:

• Understood Python syntax and control flow.

• Practiced loops and conditional statements.

• Wrote small automation-based programs.

• Improved coding logic and confidence in Python.

 DAY 9 [04/07/2025]
Topic: Introduction to Flask Framework and Web Application Setup

Objective:
To learn the basics of the Flask framework and create a simple Python-based web application.

Technical Description:
On the ninth day, I was introduced to Flask, a lightweight Python framework used for web
development. The trainer explained that Flask follows a micro-framework approach, providing
only the essential tools for flexibility.

We installed Flask using:

pip install flask

Then created a basic web app:

from flask import Flask

app = Flask(__name__)

@[Link]('/')
def home():
return "Welcome to My First Flask App!"

if __name__ == '__main__':
[Link](debug=True)

Running the program launched a local server at [Link]

I also learned about routing, templates, and dynamic data rendering using the Jinja2 engine with
render_template(). The session covered handling GET and POST requests for form
submissions and basic backend validation.

Outcome:

• Installed and configured Flask.

• Built a simple web app with routes.

• Understood templates and data rendering.

• Learned about request handling and local server setup.

 DAY 10 [05/07/2025]

Topic: Database Integration with Flask using MySQL

Objective:
To learn how to connect Flask applications with MySQL and perform basic database operations for
dynamic web applications.

Technical Description:
On the tenth day, I learned how to integrate MySQL with a Flask web application to store and
manage user data dynamically. The session began with an introduction to relational database
concepts such as tables, rows, primary keys, and SQL commands.

After installing MySQL and the connector library using:

pip install mysql-connector-python

We created a connection in Flask:

import [Link]
mydb = [Link] (host="localhost", user="root", password="", database="flaskdb")

Then, I created a user table and performed CRUD (Create, Read, Update, Delete) operations
through Flask routes. Example:

@[Link]('/add')
def add_user():
cur = [Link]()
[Link]("INSERT INTO users (name, email) VALUES (%s, %s)", ("KL", "kl@[Link]"))
[Link]()
return "User added!"

I also learned how Flask retrieves data using SQL queries and displays it dynamically on a
webpage. The trainer emphasized best practices like using environment variables for credentials,
closing database connections, and handling errors properly.
Outcome:

• Understood MySQL and RDBMS concepts.

• Connected Flask with MySQL.

• Practiced CRUD operations.

• Built a basic database-driven web app.

• Strengthened backend integration skills.

 DAY 11 [06/07/2025]

Topic: CRUD Operations in Flask – User Management System

Objective:
To build a simple CRUD-based web application in Flask using MySQL for managing user data.

Technical Description:
On the eleventh day, I developed a user management system applying CRUD (Create, Read,
Update, Delete) operations. The trainer explained that CRUD is the foundation of all dynamic web
applications like dashboards and e-commerce sites.

We designed a user table with fields like ID, Name, and Email, and connected Flask with MySQL.

• Create: Added new users through an HTML form using POST requests and inserted records
using SQL INSERT queries.

• Read: Displayed all user data dynamically using SELECT * FROM users in Flask
routes.

• Update: Edited user details with an update form and UPDATE queries.

• Delete: Removed users through a delete route linked to record IDs.

By completing this task, I understood how backend logic interacts with frontend forms to manage
dynamic data efficiently.

Outcome:

• Gained hands-on CRUD experience.

• Learned front-end to backend integration.

• Understood SQL operations inside Flask.

 DAY 12 [07/07/2025]

Topic: Flask Templates, Jinja2, and Dynamic Webpages

Objective:
To learn Flask’s Jinja2 templating engine and create dynamic, reusable webpage layouts.

Technical Description:
On the twelfth day, I learned about Flask templates using Jinja2, which allows dynamic data
rendering inside HTML. The trainer explained how Jinja2 makes pages interactive using embedded
Python expressions like {{ variable }}.

We structured the project with separate folders for templates and static files. Using template
inheritance, a base layout ([Link]) was created with a header and footer, and other pages
like [Link] extended it.

Dynamic data was displayed using loops and conditionals in Jinja2, for example:

{% for user in users %}

<li>{{ user[1] }} - {{ user[2] }}</li>
{% endfor %}

We also linked CSS files using url_for() to maintain consistent styling.

By the end of the session, I built a multi-page Flask app with a shared layout and dynamic content
display.

Outcome:

• Learned Jinja2 template syntax and inheritance.

• Integrated backend data into HTML.

• Designed dynamic and reusable web layouts.

 DAY 13 [08/07/2025]

Topic: Flask Project Building a Mini Food Ordering System

Objective:
To apply Flask, HTML, CSS, and MySQL concepts to build a mini food ordering web app.

Technical Description:
On the thirteenth day, I started a mini project using Flask to create a food ordering system that
combined front-end and back-end technologies. The project allowed users to view food items, add
them to a cart, and confirm their orders.

A database named fooddb was created in MySQL with two tables:

• items – stores food details (id, name, price, category)

• orders – stores confirmed orders (order_id, item_name, quantity, total_price)

Flask was connected to MySQL using [Link]. Food items were fetched and
displayed using Jinja2 loops, and a simple cart system was built to calculate total price. Confirmed
orders were inserted into the database using SQL queries.

By the end of the day, I successfully developed a functional food ordering web app with UI,
database, and backend integration.

Outcome:

• Applied full-stack development concepts in a real project.

• Learned to connect Flask with MySQL effectively.

• Built a functional mini food ordering system.

 DAY 14 [09/07/2025]

Topic: Testing and Debugging Flask Application

Objective:
To test and debug the Flask food ordering application for stable and efficient performance.

Technical Description:
On the fourteenth day, I focused on testing and debugging the Flask project. The trainer explained
that testing ensures all features work correctly before deployment.

We used Flask’s debug mode ([Link](debug=True)) to identify and fix errors easily.
Functional testing was done to verify routes like /menu, /cart, and /confirm. Database testing
ensured proper data insertion and retrieval without duplicates.

Form validation was added using both Python checks and HTML attributes. Error handling was
implemented using try-except blocks, and redundant SQL queries were optimized to prevent
injection attacks.

For monitoring, Python’s logging module was used to record important events and errors. After
completing all tests, the app was stable and ready for deployment.

Outcome:

• Learned the importance of testing and debugging.

• Performed route, form, and database validation.

• Used logging for application monitoring.

• Ensured smooth and error-free project performance.

 DAY 15 [10/07/2025]

Topic: Project Deployment and Final Presentation

Objective:
To deploy the completed Flask Food Ordering System and present the final project with
documentation.

Technical Description:
On the fifteenth day, I learned how to deploy the Flask project both locally and online. We started
with local deployment by running python [Link], which made the app accessible at
[Link]

For online deployment, a [Link] file was generated using pip freeze >
[Link], ensuring all dependencies were installed automatically on the server. The
project was then uploaded to PythonAnywhere, where we configured the WSGI file and database
connections. After setup, the web app became accessible through a live URL.

Later, I gave a project presentation demonstrating the user interface, cart system, database
tracking, and workflow from frontend to backend. A final report with documentation, screenshots,
and outcomes was also prepared.
Outcome:

• Learned local and online Flask app deployment.

• Understood dependency and environment setup.

• Presented and documented a fully working project.

• Gained confidence in full-stack project completion.

CERTIFICATE: